dom 转换图片,canvas 转换图片

2019-01-08 18:19 / 已浏览 626 次

基于html2canvas 网页保存为图片,将DOM改写为canvas,通过canvas转换为图片

实现保存为图片的第一步:html转为canvas

var dom = document.querySelector('.dom');
html2canvas(dom).then(function(canvas) {
    // document.body.appendChild(canvas);
    var imgData = canvas.toDataURL("image/png");  // canvas 转换为图片
    console.log(imgData);
});

坑1:转换后的canvas 模糊,解决方案 使用img 图片, 不要使用背景图,不要使用背景图,不要使用背景图

<img src="img" class='dom'/>

坑2:CDN跨域问题 html2canvas 支持设置允许跨域

html2canvas(element, { useCORS: true })

坑3:微信头像转换配置,解决方案 服务端必须配置代理转发(proxy_pass)实现,代理成自己业务域名,否则会有跨域问题导致微信头像转换失败

待完善。。。

群号:339840649
Node、Vue、react、angular