uniapp 图片生成

通过插件 html2canvas 实现图片生成

利用dom节点进行canvas绘制成base64的图片，相当于将html页面转为图片

1.安装

npm install --save html2canvas

2. 引用

import html2canvas from "html2canvas
export default{
	data(){
        return{
            imgUrl:"", // 用于存储base64图片
        }
    }
}

3. 生成图片
 

<view>
    <!-- 需要使用div来进行使用,否则会保存,ref来指定你需要截屏的dom -->
	<div id="htmlCanvas" ref="imgCanvas">
        <!--想要保存的图片内容在此放置-->				
    </div>
</view>

toImage(){
	html2canvas(this.$refs.imgCanvas,{
		backgroundColor: null,
		useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
	}).then((canvas)=>{
		let url = canvas.toDataURL('image/png')
		this.imgUrl = url
        // 调用原生方法进行图片保存
		this.$bridge.callhandler("保存图片方法名", {
              imageurl:this.imgUrl
     	});					
	})
},

4. 注意

保存图片必须在页面中显示才可以保存，可以做成弹窗形式进行保存