闻心阁

一蓑烟雨看苍生,半壶浊酒笑红尘

解决html2canvas的图片跨域问题

2018-01-04 约 1 分钟读完 搬砖秘籍

最近要做一个将当前HTML页面生成图片的功能,网上百度了一圈,确定了如下的解决方案。

  1. 使用html2canvas将HTML DOM节点转换成canvas
  2. 使用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">

问题解决,以上。

参考

一次 H5 「保存页面为图片」 的踩坑之旅