// 圖片轉換格式的方法 直接使用就好 不需要知道為什么 dataURLToBlob (dataurl) { let arr = dataurl.split(',') let mime = arr[0].match(/:(.*?);/)[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], { type: mime }) } /* 保存圖片的方法(即按鈕點擊觸發的方法) 第一個參數為需要保存的div的id名 第二個參數為保存圖片的名稱 */ saveImage (dom, imgText = '測試') { let that = this let a = document.createElement('a') html2canvas(dom).then(canvas => { let dom = document.body.appendChild(canvas) dom.style.display = 'none' a.style.display = 'none' document.body.removeChild(dom) let blob = that.dataURLToBlob(dom.toDataURL('image/png')) // console.log(dom.toDataURL('image/png')) // console.log(URL.createObjectURL(blob)) a.setAttribute('href', URL.createObjectURL(blob)) // 這塊是保存圖片操作 可以設置保存的圖片的信息 a.setAttribute('download', imgText + '.png') document.body.appendChild(a) a.click() URL.revokeObjectURL(blob) document.body.removeChild(a) }) }
// 不需要下載圖片,直接把圖片生成base64,然后給后端的做法
/* 保存圖片的方法(即按鈕點擊觸發的方法) 第一個參數為需要保存的div的id名 第二個參數為保存圖片的名稱 */ saveImage (dom, imgText = '測試') { html2canvas(dom).then(canvas => { // 獲取Base64碼 console.log(canvas.toDataURL()) }) }
