最近做了一个分享页面，要求长按保存相册，其中用到了html2canvas，使用比较简单，但是遇到的比较常见的几个坑，来做下总结：
1. 解决图片模糊和偏移
$('.share')是需要转成图片的dom
function share(){
var width = $(
'.share')[
0].offsetWidth;
//dom宽
var height = $(
'.share')[
0].offsetHeight;
//dom高
// 解决图片模糊
var scale =
2;
//放大倍数
var canvas =
document.createElement(
'canvas');
canvas.width = width *
2;
canvas.height = height *
2;
canvas.style.width = width +
'px';
canvas.style.height = height +
'px';
var context = canvas.getContext(
'2d');
context.scale(scale, scale);
//设置context位置，值为相对于视窗的偏移量负值，让图片复位(解决偏移的重点)
var rect = $(
'.share').get(
0).getBoundingClientRect();
//获取元素相对于视察的偏移量
context.translate(-rect.left, -rect.top);
var opts = {
canvas: canvas,
useCORS:
true,
// 【重要】开启跨域配置
scrollY:
0,
// 纵向偏移量 写死0 可以避免滚动造成偶尔偏移的现象
};
html2canvas($(
".share")[
0], opts).then(
canvas => {
// 使用toDataURL方法将图像转换被base64编码的URL字符串
var src = canvas.toDataURL();
// 显示图片隐藏dom(图片生成后的操作)
$(
'.share-wrap').addClass(
'hidden');
$(
'.share-canvas').removeClass(
'hidden');
$(
'.share-canvas').find(
'img').attr(
'src', src);
});
}
查询资料时，还发现了一种造成模糊的操作：使用背景图片，所以需要将所有图片转为img前景图
补充：使用vant组件的弹窗动画也会产生偏移；生成图片的元素采用px单位
2.解决字体改变：
项目中需要用到黑体，直接设置font-family: "SimHei";不起做用，偶尔看到一篇文章了解到转canvas的字体操作，使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染，对于html中的文字会转换成对应的 unicode码，再根据HTML 里设置的 font-family (如果没设置则使用浏览器默认设置)去查找电脑里(如果有自定义字体@font-face ，则加载对应字体文件)对应字体的字体文件，找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上。
解决方案：font-family: "\9ED1\4F53"; (将字体转成unicode码显示)
文章来源: blog.csdn.net，作者：jinxi1112，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jinxi1112/article/details/101285998