点击链接复制Canvas图像到新画布并下载，功能不稳定如何修复？

问题根源 #

你的代码核心问题是异步执行顺序错误：链接点击事件会立即触发浏览器的下载行为，但imgo.onload是异步回调——第一次点击时，link.href还没被设置就开始下载，自然无效；第二次点击时，上一次的异步回调已经完成，href是有效的旧值，所以能正常下载；画布修改后，第三次点击用的还是第二次的旧href，第四次才会拿到新值，导致了这种每隔一次才有效的规律。

修复代码 #

link.addEventListener('click', function(e) {
    // 阻止默认点击行为，避免异步未完成就触发下载
    e.preventDefault();

    var canvasN = document.createElement('canvas');
    var ctxN = canvasN.getContext("2d");

    canvasN.width = canvasX.value;
    canvasN.height = canvasY.value;

    var imgo = new Image();
    // 处理潜在的跨域问题（如果canvas包含跨域资源时需要）
    imgo.crossOrigin = 'anonymous';
    imgo.src = canvas.toDataURL();
    
    imgo.onload = function() {
        ctxN.drawImage(imgo, 0, 0, canvasN.width, canvasN.height);
        // 获取新canvas的dataURL
        var dataURL = canvasN.toDataURL("image/png");
        
        // 创建临时a标签触发下载，避免原链接的状态干扰
        var tempLink = document.createElement('a');
        tempLink.href = dataURL;
        tempLink.download = "image.png";
        // 触发点击
        tempLink.click();
        // 移除临时元素
        tempLink.remove();
    };
});

关键修改点 #

• 调用e.preventDefault()阻止默认下载行为，等待异步操作完成后再手动触发。
• 使用临时a标签触发下载，完全隔离原链接的状态，避免旧的href值干扰。
• 新增imgo.crossOrigin = 'anonymous'，预防如果canvas包含跨域资源时可能出现的toDataURL报错问题（如果你的canvas只使用同源资源，也可以保留这行增强兼容性）。

这样修改后，每次点击都会等待新canvas绘制完成后再触发下载，不会出现异步滞后导致的无效下载或旧内容下载问题。

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