uniapp app端使用html2canvas和renderjs实现生成海报图

uniapp app端使用html2canvas和renderjs实现生成海报图

原本app端是无法使用html2canvas的因为，app端不支持浏览器js。
不过我在uniapp里面看到了renderjs。使用这个就可以帮助我们在app端内使用浏览器对象了。这样html2canvas也就可以实现了。

renderjs

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。

renderjs的主要作用有2个：

大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
在视图层操作dom，运行for web的js库
renderjs只能在app端和h5端使用注意。

<script module="canvas" lang="renderjs">
	import html2canvas from "@/static/html2canvas";
    export default {
		data(){
			return {
			}
		},
        methods: {
          createPoster(event, ownerInstance) {
          // 生成海报  
                const domObj = document.getElementById("posterHtml");
			html2canvas(domObj, {
                  useCORS: true,
                  logging: false,
                  letterRendering: true,
                  proxy: "http://oss.licai521.com/",    
									allowTaint:true, 
                  onclone(doc) {
                    let e = doc.querySelector("#posterHtml");
                    e.style.display = "block";
                  },
                }).then(function (canvas) { 
                  var posterImg = canvas.toDataURL("image/png",0.7);
									
								ownerInstance.callMethod('creates', {	
									posterImg: posterImg
								})
								
               }).catch(err => {
									console.log(err)
								})
          },
          },
        }
    }
</script>

<script>
export default {
  data() {
    return {
      posterImg: "", // 最终生成的海报图片
    };
  },
   methods: {
   	creates(option){
		//这里就接收到了图片的路径。直接就可以拿到页面dom上去渲染了。
		console.log(option.posterImg)
		this.posterImg=option.posterImg
	},
   }
  }
</script>

点击事件的话

//这个canvas就是你<script module="canvas" lang="renderjs">这个script标签上的module module可以自己随便定义。两个对应起来就好
  <div class="share-item" @click="canvas.createPoster"></div>
  

html2canvas遇到的坑

图片文字上下间距不对：
降低html2canvas版本；
在ios报错The operation is insecure.
这个报错折腾好久，开始以为是苹果的浏览器不支持这个插件，
后来发现就是图片的跨域问题。
解决图片跨域就ok了