html2canvas快速使用

安装?

npm install html2canvas

基本使用

<template>
  <div>
	<div id='stickerList'>
        <img src='./Group 50.bc4a53c4_副本.png'/>
    </div>
	<button @click="savePie()">011</button>
	<img :src="imgurl" alt="" style="width: 230px;height: 200px;" v-if="imgurl">
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
	data() {
		return {
			imgurl:''
		}
	},
	methods: {
		savePie(){
			html2canvas(document.querySelector('#stickerList')).then((canvas) => {
    		// 转换成base64格式，这个格式可以挂载到img里，也可以下载下来，也可以打压缩包下载下来
    		// const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
			// console.log(base64,'base64');
    		// const base64img = `data:image/jpg;base64,${base64}`
    		// console.log(base64img);
			this.imgurl = canvas.toDataURL()
  			}).catch((err) => {
      
  			});
		}
	},
}

提高图片清晰度参数

html2canvas(targetDom, {
    // 可配置项
    scale: 4, // 提高渲染的比例
    dpi: window.devicePixelRatio // 分辨率
})