vue使用html2canvas將html轉化為圖片并保存

1、安裝

npm i html2canvas -S

2、導入

在要使用的頁面導入
import html2canvas from "html2canvas"

3、聲稱畫布&點擊保存

<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從服務器加載圖像，必須為true否則img圖片可能顯示不出來
                    x: 裁剪畫布x坐標,
                    y: 裁剪畫布y坐標
                }).then(canvas => {
                    // 點擊保存操作
                    const link = document.createElement('a')
                    link.href = canvas.toDataURL()
                    link.setAttribute('download', 圖片名 + '.png')
                    link.style.display = 'none'
                    document.body.appendChild(link)
                    link.click()
                })
            }
        }
    }
</script>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容