1燃异、安裝
npm i html2canvas -S
2猫牡、導(dǎo)入
在要使用的頁面導(dǎo)入
import html2canvas from "html2canvas"
3布疼、聲稱畫布&點(diǎn)擊保存
<template>
<div ref="saveImage" @click="save">
……
</div>
</template>
<script>
import html2canvas from "html2canvas"
export default {
data() {},
methods: {
save() {
html2canvas(this.$refs.saveImage, {
allowTaint: false, // 是否允許跨域圖像污染畫布
useCORS: true, // 使用CO RS從服務(wù)器加載圖像居暖，必須為true否則img圖片可能顯示不出來
x: 裁剪畫布x坐標(biāo),
y: 裁剪畫布y坐標(biāo)
}).then(canvas => {
// 點(diǎn)擊保存操作
const link = document.createElement('a')
link.href = canvas.toDataURL()
link.setAttribute('download', 圖片名 + '.png')
link.style.display = 'none'
document.body.appendChild(link)
link.click()
})
}
}
}
</script>
