标签：模糊 透明 htm 定位 自己 也会 query highlight 常见
近两年做了几次微信H5活动的开发，为了达到传播分享的效果，通常最终都需要生成个性化的图片，供用户长按保存分享，在这里就把自己的一些使用心得记录下来，供其他小伙伴借鉴。
这里备注一下，我目前用的是 html2canvas 0.5.0-beta4 版本，这篇文章也以它为例，先贴一下代码
let canvas = document.createElement(‘canvas‘);
let cardBox = document.querySelector("#imgBox");
let w=cardBox.offsetWidth;
let h=cardBox.offsetHeight;
let scale=3;
canvas.width = w*scale;
canvas.height = h*scale;
canvas.style.width=w+"px";
canvas.style.height=h+"px";
let context = canvas.getContext("2d");
context.scale(scale,scale);
let rect = cardBox.getBoundingClientRect();//获取元素相对于视察的偏移量
context.translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
html2canvas(cardBox, {
canvas: canvas,
scale: scale,
dpi:1,
width:w,
height:h,
}).then((canvas)=> {
var dataUrl = canvas.toDataURL();
//这个dataUrl就是生成图片的base64编码了
});
1.图片模糊的问题
这个问题很常见，造成的原因也是有多个的，首先就是上图代码中声明的 scale 参数，通过这个参数控制画布的缩放，可以增加图片的清晰度，但是太高也会有问题，会导致图片太大，以及超过屏幕分辨率而出现色彩斑点，因此找到一个比较合适的比例就好；
另一个常见的原因就是在需要生成为图片的html中，一些原本就是图片的元素，最好使用img标签去加载他，而不是用作背景图。
2.图片跨域
我们在生成的图片中经常会用到当前用户的头像，这个头像是微信那边返回的一个url，如果直接把他通过img标签放在html里面，会发现最终生成的图片没有头像，这是因为canvas的浏览器安全协议阻止了这个行为，这个目前没找到办法在前端去解决，我一般是让后端讲这个图片转为base64以后传给我，这样就像是本地资源一样，便不会有跨域问题了。
3.图片中的元素位置发生偏移
经过一些对比，我发现生成的图片中一些元素相对于html的位置发生了细小的偏移，后来在网上找到了解决方法
let rect = cardBox.getBoundingClientRect();//获取元素相对于视察的偏移量 context.translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
就是通过以上两行代码，在canvas中绘制html元素时，会纠正元素的偏移问题。
4.如何实现长按保存
因为微信浏览器中的图片标签，经过长按以后会触发浏览器的事件，弹出保存和分享等菜单栏，因此在微信中只要你将最终生成的图片放在手指可以操作的地方，然后提示用户长按就好。不过通常我是讲生成后的图片加载为img后通过相对定位覆盖在需要生成为图片的那个div上面，最好透明度设置为0，这样生成的那一瞬间也没有突然变化的效果，用户体验会更好一些，用户对着那个div长按，实际则是按到了覆盖在上面的img，微信浏览器就会弹出菜单栏，用户便可以保存或者分享了。
标签：模糊 透明 htm 定位 自己 也会 query highlight 常见
原文地址：https://www.cnblogs.com/Miracle-ZLZ/p/13093647.html
