闻心阁

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

解决html2canvas的图片跨域问题

2018-01-04 约 1 分钟读完 搬砖秘籍
最近要做一个将当前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"> 问题解决,以上。 参考 一次 H5 「保存页面为图片」 的踩坑之旅