嘿，这个需求我之前帮朋友处理过，移动端直接把生成的图片存到相册确实和浏览器默认下载不一样——毕竟浏览器的下载行为只会丢到下载文件夹，得用一些适配移动端的方法，给你两个靠谱的实现方案：

这个方法是把生成的canvas转换成img元素插入页面，引导用户长按图片保存到相册——这是移动端用户非常熟悉的操作，无需额外依赖，兼容性也拉满。

修改你的现有代码如下：

let jQueryNC = jQuery.noConflict();
jQueryNC('#save-voucher-img').click(function () {
    jQueryNC('#save-voucher-img').addClass("removed");
    html2canvas(jQueryNC("#voucher-code-form")[0]).then(function (canvas) {
        // 将canvas转换为可交互的img元素
        const saveImg = document.createElement('img');
        saveImg.src = canvas.toDataURL("image/jpeg", 1.0);
        // 设置样式让图片居中显示，遮罩层增强体验
        saveImg.style.cssText = `
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 90%;
            z-index: 9999;
            border: 2px solid #fff;
            border-radius: 8px;
        `;
        const maskLayer = document.createElement('div');
        maskLayer.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
            z-index: 9998;
        `;

        // 插入到页面中
        document.body.appendChild(maskLayer);
        document.body.appendChild(saveImg);

        // 点击遮罩层关闭图片和遮罩，恢复按钮状态
        maskLayer.addEventListener('click', () => {
            document.body.removeChild(saveImg);
            document.body.removeChild(maskLayer);
            jQueryNC('#save-voucher-img').removeClass("removed");
        });

        // 提示用户操作
        alert('长按图片即可保存到相册');
    });
});

优点：代码改动小、无额外依赖、兼容绝大多数移动端浏览器；
缺点：需要用户手动长按操作，不是全自动保存——但这是普通网页能实现的最接近“直接存相册”的方式了，毕竟浏览器出于安全限制，不允许网页直接写入用户相册，必须经过用户交互。

如果用户的设备支持navigator.share（现代移动端浏览器基本都支持，比如Chrome、Safari 12+），可以把生成的图片转换成Blob，通过系统分享面板让用户直接选择“保存到相册”，体验更流畅。

代码示例：

let jQueryNC = jQuery.noConflict();
jQueryNC('#save-voucher-img').click(function () {
    jQueryNC('#save-voucher-img').addClass("removed");
    html2canvas(jQueryNC("#voucher-code-form")[0]).then(function (canvas) {
        // 将canvas转换为Blob格式
        canvas.toBlob(function(imgBlob) {
            const saveFile = new File([imgBlob], 'event-voucher.jpg', {type: 'image/jpeg'});
            
            // 检查浏览器是否支持文件分享
            if (navigator.share && navigator.canShare && navigator.canShare({files: [saveFile]})) {
                navigator.share({
                    files: [saveFile],
                    title: '活动优惠券',
                    text: '保存你的专属活动优惠券到相册'
                }).then(() => {
                    console.log('保存操作完成');
                }).catch((err) => {
                    console.log('用户取消或保存失败:', err);
                }).finally(() => {
                    jQueryNC('#save-voucher-img').removeClass("removed");
                });
            } else {
                // 不支持的话，降级到方案1的长按保存
                const fallbackImg = document.createElement('img');
                fallbackImg.src = canvas.toDataURL("image/jpeg", 1.0);
                fallbackImg.style.cssText = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    max-width: 90%;
                    z-index: 9999;
                    border: 2px solid #fff;
                `;
                const fallbackMask = document.createElement('div');
                fallbackMask.style.cssText = `
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,0.7);
                    z-index: 9998;
                `;
                document.body.appendChild(fallbackMask);
                document.body.appendChild(fallbackImg);
                fallbackMask.addEventListener('click', () => {
                    document.body.removeChild(fallbackImg);
                    document.body.removeChild(fallbackMask);
                    jQueryNC('#save-voucher-img').removeClass("removed");
                });
                alert('长按图片即可保存到相册');
            }
        }, 'image/jpeg', 1.0);
    });
});

优点：用户可以通过系统原生面板直接选择保存到相册，体验更自然；
缺点：依赖浏览器的navigator.share支持，部分老旧设备可能不兼容，所以必须做降级处理。

• HTTPS要求：除了本地开发环境，移动端浏览器只有在HTTPS协议下才能使用navigator.share、canvas转Blob等API，否则会触发安全报错；
• 跨域图片问题：如果你的页面里包含跨域图片，需要在html2canvas的配置中添加useCORS: true，同时确保图片服务器允许跨域访问；
• 按钮状态修复：你原代码中移除removed类的时机不对，应该放在异步操作的finally或者回调里，避免还没生成图片就恢复按钮状态。

内容的提问来源于stack exchange，提问作者Raphael Estrada