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了