使用html2canvas获取div元素图像失败如何解决

• 笔误导致转码失败：toDataURL的MIME类型参数错写为impage/png，正确值为image/png，参数非法时接口会抛出错误，无法生成图像地址。
• 冗余自定义画布逻辑干扰渲染：手动创建canvas、调用ctx.translate(-rect.left,-rect.top)做偏移属于多余操作，html2canvas会自动计算目标元素的尺寸、视口位置，手动传入自定义画布+偏移量会导致渲染区域错位，最终输出空白画布。
• API版本不匹配：v1.0及以上版本的html2canvas已经废弃onrendered回调配置，新接口返回Promise对象，旧配置写法不会触发渲染完成后的逻辑，自然不会执行后续图像生成、插入的代码。
• 缺失核心需求逻辑：现有代码未实现「复制图像到剪贴板」的功能，仅包含新窗口打开图像、页面插入预览图的逻辑。

先确保引入v1.0+稳定版的html2canvas，替换原有点击事件代码即可：

$(document).on("click", ".canvas-button", async function (){
    const targetDiv = document.getElementById($(this).data("div"));
    if (!targetDiv) return;

    try {
        // 直接传入目标元素渲染，无需手动创建画布
        const canvas = await html2canvas(targetDiv, {
            useCORS: true, // 目标div含跨域图片时开启，需资源服务端配置CORS权限
            scale: window.devicePixelRatio // 适配高分辨率屏幕，避免导出图像模糊
        });

        // 生成图像地址
        const imgDataUrl = canvas.toDataURL("image/png");
        // 页面插入预览图
        $("#parent").append(`<img src="${imgDataUrl}" />`);
        // 如需新窗口打开预览取消注释即可
        // window.open(imgDataUrl);

        // 复制图像到剪贴板逻辑
        canvas.toBlob(async (blob) => {
            try {
                await navigator.clipboard.write([
                    new ClipboardItem({
                        "image/png": blob
                    })
                ]);
                console.log("图像已成功复制到剪贴板");
            } catch (copyErr) {
                console.error("剪贴板复制失败，请检查站点权限与协议：", copyErr);
            }
        }, "image/png");
    } catch (renderErr) {
        console.error("div渲染失败：", renderErr);
    }
});

• 若目标div内存在跨域图片、字体等资源，需要对应资源的服务器配置Access-Control-Allow-Origin跨域头，同时开启useCORS: true配置，否则画布会被浏览器标记为污染状态，无法导出、复制。
• 浏览器剪贴板API仅在HTTPS环境、本地localhost开发环境下可用，普通HTTP站点调用会被权限拦截。
• 非必要不要手动传入canvas、width、height配置项，html2canvas会自动读取目标元素的实际渲染尺寸计算画布大小，手动传值极易出现尺寸不匹配、渲染内容截断/空白的问题。

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