小程序html2canvas,小程序怎么开发自己的小程序
vue中html2canvas的使用
html2canvas： 将dom元素转为一张图片?
1，装包：?npm install --save html2canvas
2，导入：?import html2canvas from 'html2canvas';
3，如果该盒子里面有从后台请求回来的图片路径 可能会存在图片跨域情况
? ? ????img标签里加上?crossorigin='anonymous'
? ? ? ? html2canvas方法里 加上useCORS: true,
? ? ? ? 如果再不行 就在图片路径后面加个时间戳 ：url+'?time='+new Date().valueOf()
```
toImage() {
? ? ? ? ? ? window.pageYOffset = 0
? ? ? ? ? ? document.documentElement.scrollTop = 0
? ? ? ? ? ? document.body.scrollTop = 0
? ? ? ? ? ? ?html2canvas(this.$refs.qrcode,{
? ? ? ? ? ? ? ? ? ? useCORS:true,
? ? ? ? ? ? ? ? ? ? windowWidth: document.body.scrollWidth,
? ? ? ? ? ? ? ? ? ? windowHeight: document.body.scrollHeight,
? ? ? ? ? ? ? ? ? ? x: document.getElementById('qrcode').offsetLeft,
? ? ? ? ? ? ? ? ? ? y: document.getElementById('qrcode').offsetTop,
? ? ? ? ? ? ? ? ? ? scale: 2,? ?
? ? ? ? ? ? ? ? }).then(canvas = {
? ? ? ? ? ? ? ? ? ? let dataURL = canvas.toDataURL("image/png");
? ? ? ? ? ? ? ? ? ? this.imgUrl = dataURL;
? ? ? ? ? ? ? ? ? ? if(this.imgUrl) {
? ? ? ? ? ? ? ? ? ? ? ? this.show =true
? ? ? ? ? ? ? ? ? ? ? ? this.loading.close();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }).catch(err = {
? ? ? ? ? ? ? ? ? ? this.loading.close();
? ? ? ? ? ? ? });
? ? ? ? },
```
4，?html2canvas(要转成图片的元素，对象-最终图片的属性)
? ? useCORS： 表示允许跨域
? ?windowWidth,windowHeight,x,y, ?是解决最终图片顶部或底部的空白区域
5， scale -- 清晰度
html2canvas报错？
报错可能是因为图片有跨域问题，或者出现不能处理的节点。
这个插件可以把一般的html转换为canvas，并且导出图片。canvas当中图片不能跨域，否则会出错。而且如果节点过多或者过于复杂，也会出现转化不成功的情况。
如何使用html2canvas
1.引入html2canvas
2.
html2canvas(document.body, {
onrendered: function(canvas){
document.body.appendChild(canvas);
},
width:300,
height:200
});
然后就在document.body中append了一个canvas.
3.如果想要实现生成一个图片，可以这样实现：
html2canvas(document.body, {
onrendered: function(canvas){
//document.body.appendChild(canvas);
var img = canvas.toDataURL();
console.log(img); //在console中会输出图片的路径，然后复制在浏览器一粘贴，就可以看到。
},
width:300,
height:200
});
关于html2canvas用法的总结
最近H5项目有个功能需求：长按微信网页保存为截图。本人使用了html2canvas.js实现，感觉效果还不错，有几个注意点和大家分享一下。
html2canvas官网：
使用的版本是最新版本：^1.0.0-alpha.12
html2canvas 可以将一个元素渲染为canvas。需要注意的是，Vue使用v-if和v-show的时候html2canvas无法将元素渲染为canvas。在我的项目之中存在一个骨架屏，这里我的解决方案是对要渲染的网页采用position:absolute为其增加一个蒙层。
生成canvas之后可以采用canvas.toDataURL("image/png")将canvas转化为base64。
关于清晰度问题：在Android手机上，生成的图片会存在模糊。图片的清晰度取决于生成的canvas的清晰度，在html2canvas之中存在一个参数scale，这里设置生成canvas的大小设置为图片大小的两倍保障清晰度。
最后，如果网页之中存在较大的图片，可能导致html2canvas生成canvas的时候图片还没有加载完，从而致使排版错乱。可以判断一下图片是否加载完。
html2canvas的使用
1.图片的偏移问题
有一个很重要的问题需要提醒一下，当你的dom元素没有用到绝对定位或者fixed定位的时候，不要给元素加上偏移量，这样有可能会导致你的图片发生偏移。我们在项目上线的时候遇到了一个很郁闷的问题，保存的图片在预发和测试环境上都没有问题，但是只要上生产环境就会发生图片偏移，后来我们通过修改，发现了是这个定位的问题。
2.对 css3 支持不好
html2canvas 暂不支持的 CSS 样式属性:
background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform
3.背景图片模糊
解决方案：使用img标签来实现background-image的效果
4.图片无法渲染
在img标签内加入crossorigin=‘anonymous’（crossorigin='anonymous’可以触发带跨域请求头Origin的HTTP请求）并给html2canvas设置allowTaint: true配置
~~写在结尾：
目前只是遇到这些问题，希望能帮助到大家