含外部图片的div使用html2Canvas下载异常求助

项目背景 #

项目功能是接收用户输入的网址，爬取该页面所有图片链接并返回给前端，插入到预先设计好的div模板中，功能类似Pingenerator.com。

故障现象 #

能正常获取图片链接并插入前端模板，但使用html2Canvas下载div时，外部来源的图片完全无法显示；如果用本地存储的图片，下载后的内容显示正常。

当前使用的代码 #

html2canvas($('#templated')[0], {
    useCORS: true, 
    allowTaint: false,
    logging: true,
    onclone: function(clonedDoc) {
        $(clonedDoc.getElementById('templated')).css('display', 'block');
    }
}).then(function(canvas) {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/jpeg', 0.95);
    link.download = 'template.jpg'; 
    link.click(); 
}).catch(function(error) {
    console.error('Error occurred while rendering the canvas:', error);
});

1. 调整html2Canvas的CORS配置 #

当前allowTaint: false会阻止跨域图片渲染到画布，改成allowTaint: true，同时保留useCORS: true。但要注意：开启allowTaint后画布会被标记为“受污染”，无法再用toDataURL()，需要换成toBlob()来生成下载链接：

function renderCanvas() {
  html2canvas($('#templated')[0], {
    useCORS: true, 
    allowTaint: true, // 修改此处
    logging: true,
    onclone: function(clonedDoc) {
      $(clonedDoc.getElementById('templated')).css('display', 'block');
    }
  }).then(function(canvas) {
    // 用toBlob替代toDataURL
    canvas.toBlob(function(blob) {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'template.jpg'; 
      link.click();
      URL.revokeObjectURL(link.href); // 及时释放内存
    }, 'image/jpeg', 0.95);
  }).catch(function(error) {
    console.error('截图失败:', error);
  });
}

2. 确保所有图片加载完成再截图 #

外部图片加载可能有延迟，直接调用html2Canvas时图片还没加载好，导致截图为空。可以监听所有图片的加载状态，等全部加载完成再执行截图：

const templateImages = $('#templated img');
let loadedImages = 0;

templateImages.each(function() {
  // 图片已加载完成
  if (this.complete) {
    loadedImages++;
  } else {
    // 监听加载完成事件
    $(this).on('load', () => {
      loadedImages++;
      checkAllLoaded();
    });
    // 处理图片加载失败的情况
    $(this).on('error', () => {
      loadedImages++;
      console.error('图片加载失败:', this.src);
      checkAllLoaded();
    });
  }
});

// 检查是否所有图片都加载完毕
function checkAllLoaded() {
  if (loadedImages === templateImages.length) {
    renderCanvas(); // 调用上面的截图函数
  }
}

// 初始检查：如果所有图片一开始就加载好了
if (loadedImages === templateImages.length) {
  renderCanvas();
}

3. 使用后端代理解决跨域问题 #

如果目标图片服务器没有配置CORS头，上面的方法可能失效。这时候可以搭建一个简单的后端代理，让前端通过代理请求外部图片（变成同源请求）：
比如用Node.js + Express实现代理：

// Node.js 代理示例
const express = require('express');
const request = require('request');
const app = express();

app.get('/proxy-image', (req, res) => {
  const imageUrl = req.query.url;
  // 转发请求并返回图片
  request(imageUrl).pipe(res);
});

app.listen(3000, () => console.log('代理服务启动在3000端口'));

前端使用时，把外部图片地址替换成代理地址：

<img src="/proxy-image?url=https://example.com/xxx.jpg" />

4. 验证目标图片的CORS支持 #

打开浏览器控制台，查看图片加载时是否有跨域报错。如果有，说明目标服务器没配置Access-Control-Allow-Origin头，要么联系服务器管理员配置，要么用上面的代理方案。

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