本次做饿了么年度账单项目用到了html2canvas，在使用过程中遇到了一些问题，这里自己整理一下。由于网上类似博文还不少，所以坑不算深，能爬出来，不方不方。
一、功能
html展示页面，再通过canvas生成图片，调用分享接口把图片分享出去
二、方案
html ——> canvas ——> image ——> url
- html2canvas.js：可将 htmldom 转为 canvas 元素。
- canvasAPI：toDataUrl() 可将 canvas 转为 base64 格式
- base64转成file，通过upload接口生成url
三、踩坑开始啦
1、开发的时候是用 chrome 模拟器生成 canvas 后没有发现有模糊的地方，但是用 PC 代理手机请求开发资源时,发现画面的模糊感非常明显。
PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
通过网上资料的预研，我定位到应该是移动端像素密度计算的问题。
设备像素比 (简称 dpr) 定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：设备像素比 = 物理像素 / 设备独立像素
所以我们可以先获取设备像素比，然后根据比例创建尺寸更大的canvas，如二倍屏就是二倍，三倍屏就是三倍...
code如下
// first we create a deep clone node for the safty sake
let snapshotOriginal = rootNode.querySelector('.snapshot-original')
let spCloned = snapshotOriginal.cloneNode(true);
// next we reset the height to prevent person from being hide.
spCloned.querySelector('.mask').style.height = '100%'
spCloned.style.zIndex = -1
document.body.appendChild(spCloned)
// 获取像素比
const scaleBy = DPR();
// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
const defaultCanvasOptions = {
canvas: this.canvas || (this.canvas = document.createElement('canvas')),
removeContainer: true,
allowTaint: true,
imageTimeout: 0,
async: true,
ignoreElements(element){
let id = element.id
if ( id.startsWith('slide') ) {
if ( id=== 'slide12' || id === 'loading-page') return false
else return true
}
return false
}
}
let canvas1 = await html2canvas(spCloned,
{...defaultCanvasOptions, scale: scaleBy})
document.body.removeChild(spCloned)
let img = getImage('thumbnail-img', (img)=>{
document.querySelector('#share-page .snapshot').appendChild(img);
})
img.src = canvas1.toDataURL('image/png');
这时候再看效果，基本已看不出差别。
由于我这边其实使用了2次html2canvas,所以按照这个方法转换的时候，二维码和logo还是有点模糊，原因在于这两个地方我都是使用的background，替换成img就清晰了，具体为啥，emm。。。不是很明白
2、跨域图片绘制不出来
需求里需要获取微信头像，并画到canvas画布上，但是这样画布会被“污染”，一旦画布被污染，就无法读取其数据，例如，你不嫩再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。
这种机制是为了避免未经许可拉取远程网站信息而导致的用户隐私泄露。阅读更多
那么怎么解决呢？
1）、给 img 元素设置 crossOrigin 属性，值为 anonymous
2）、图片服务端设置允许跨域（返回 CORS 头）
第一步很好解决，html2canvas 本身支持配置useCORS: true
但是第二步需要服务器支持，如果图片放在自己服务器上，让后端改个配置就好了，但是我们这是另一种情况，图片在微信的CDN上，有人说前端做一个 node 中间层来进行服务器转发，感觉方案不错，但是这次我们并没有去实现，emm....遇到问题的小伙伴可以自己尝试一下。
3、box-shadow在tocanvas时会丢失
4、base64转file，使用new FIle会有兼容性支持问题，可以使用toBlob
function dataURLtoBlob(data) {
var mimeString = data.split(',')[0].split(':')[1].split(';')[0]
var byteString = atob(data.split(',')[1])
var ab = new ArrayBuffer(byteString.length)
var ia = new Uint8Array(ab)
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
var bb = (window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder)
if (bb) {
bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder)()
bb.append(ab)
return bb.getBlob(mimeString)
} else {
bb = new Blob([ab], {
'type': (mimeString)
})
return bb
}
}
参考文章：
一次 H5 「保存页面为图片」 的踩坑之旅
html2canvas以及domtoimage的使用踩坑总结
html2canvas 图片合成模糊问题解决
在简书上发布相关文章是对自己不断学习的激励；如有什么写得不对的地方，欢迎批评指正；给我点赞的都是小可爱 ~_~
