谈谈html2canvas在项目中遇见的问题

生成海报的图片模糊不清

这个问题,我百度了很久,最终发现其实我的图片用的是背景图片,在这里不能用背景图片,应该用img,并且img要用div包裹起来,举个例子:
<div> <img src="xxxx.png"/></div>
另外配置html2canvas的時候只需要把scale放大两倍就可以了

var content = $('.poster'); // 获取生成海报的区域
html2canvas(content[0], {
    scale: 2, // 放大2倍是因为 1倍的时候在高分辨率下会出现模糊的情况
    useCORS: true // 【重要】开启跨域配置
}).then(function(canvas) {
    $('#posterAfter').attr('src', canvas.toDataURL("image/png"));
});

生成海报的区域必须是在屏幕可是化的范围内,不能隐藏,否则可能导致生成的是空白的

我把我做过的分享给大家

demo体验地址:http://hb.xiaohuanzi.cn/
源代码:https://gitee.com/wuyifan1995/html2canvas

阅读 420

推荐阅读