解决html2canvas的图片跨域问题
最近要做一个将当前HTML页面生成图片的功能，网上百度了一圈，确定了如下的解决方案。
- 使用html2canvas将HTML DOM节点转换成canvas
- 使用canvas的
toDataURL方法将canvas转换成base64
github: niklasvh/html2canvas
图片跨域
在前端开发中，HTML中的 img 标签是默认支持跨域的，但是这个规则canvas不认。使用html2canvs转换canvas的时候，如果使用了不同域的图片就会报错。
针对这种情况的解决方案如下:
第一步：给 img 元素设置 crossOrigin 属性，值为 anonymous 或 *。
PS：这个html2canvas已经支持了这个配置项（version：1.0）
useCORS: true
第二步：图片服务端设置允许跨域（返回 CORS 头）。
如果图片是自己服务器的，这么做很简单，可是如果是其他服务器的呢？比如微信头像。
图片资源转发
针对非自己服务器图片的情况下，可以使用 NodeJS 做一个中间层代理。代码如下：
const router = require('express').Router();
const coWrap = require('../utils/coWrap');
var request = require('request');
router.get('/transferImage', coWrap(function* (req, res) {
var path = req.query && req.query.path;
return request.get(path).pipe(res);
}));
使用 NodeJS 的 request 库可以方便的完成这个功能。使用方法如下：
<img src="http://yourserver/prcImage/transferImage?path=https://yourimg.png">
问题解决，以上。