Vue使用html2canvas將頁面轉化為圖片

工具：

官網入口

一、下載

npm install --save html2canvas

二、使用

<template><div><div id="myH5">這里就隨便寫內容了</div><button @click="saveImg('myH5')">合 成</button></div>
</template>
<script>
import html2canvas from "html2canvas"
export default {data() { },methods: {// val傳入需要轉換的dom的idsaveImg(val) {window.pageYoffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;// 先獲取你要轉換為img的dom節點var node = document.getElementById(val);//傳入的id名稱var width = node.offsetWidth; //dom寬var height = node.offsetHeight; //dom高var scale = 2; //放大倍數 這個相當于清晰度 調大一點更清晰一點html2canvas(node, {width: width,heigth: height,backgroundColor: "#ffffff", //背景顏色 為null是透明dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素scale: scale,X: 0,Y: 0,scrollX: -3, //如果左邊多個白邊 設置該偏移-3 或者更多scrollY: 0,useCORS: true, //是否使用CORS從服務器加載圖像 !!!allowTaint: true //是否允許跨域圖像污染畫布  !!!}).then(canvas => {// console.log("canvas", canvas);var url = canvas.toDataURL(); //這里上面不設值cors會報錯var a = document.createElement("a");//創建一個a標簽 用來下載a.download = "圖片名稱"; //設置下載的圖片名稱var event = new MouseEvent("click");//增加一個點擊事件a.href = url;//此處的url為base64格式的圖片資源a.dispatchEvent(event); //觸發a的單擊事件 即可完成下載});},}
}
</script>