vue項目vue頁面內容生成圖片並保存本地方案

使用html2canvas插件 css

官網：http://html2canvas.hertzen.com/html

一、安裝：vue

npm install --save html2canvas

二、在須要使用的vue組件中引入： npm

import html2canvas from "html2canvas"

三、將制定區域內轉成圖片 canvas

　　添加ref標記跨域

<div class="container" ref="imageDom"></div>

/** * 將頁面指定節點內容轉爲圖片 * 1.拿到想要轉換爲圖片的內容節點DOM； * 2.轉換，拿到轉換後的canvas * 3.轉換爲圖片 */ clickGeneratePicture() { //生成圖片
    html2canvas(this.$refs.imageDom).then(canvas => { // 轉成圖片，生成圖片地址
        this.imgUrl = canvas.toDataURL("image/png"); //可將 canvas 轉爲 base64 格式 }); }

四、建立隱藏的可下載連接 --- 必須同源（訪問的網站域名與服務器域名一致）才能下載
瀏覽器

var eleLink = document.createElement("a"); eleLink.href = this.imgUrl; // 轉換後的圖片地址
eleLink.download = "歷史曲線圖"; document.body.appendChild(eleLink); // 觸發點擊
eleLink.click(); // 而後移除
document.body.removeChild(eleLink);

五、不一樣源下載問題服務器

downloadIamge(imgsrc, name) {//下載圖片地址和圖片名
    var image = new Image(); // 解決跨域 Canvas 污染問題
    image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; var context = canvas.getContext("2d"); context.drawImage(image, 0, 0, image.width, image.height); var url = canvas.toDataURL("image/png"); //獲得圖片的base64編碼數據

        var a = document.createElement("a"); // 生成一個a元素
        var event = new MouseEvent("click"); // 建立一個單擊事件
        a.download = name || "photo"; // 設置圖片名稱
        a.href = url; // 將生成的URL設置爲a.href屬性
        a.dispatchEvent(event); // 觸發a的單擊事件
 }; image.src = imgsrc; }, downs(){ this.downloadIamge(this.pic.url, 'pic') }

***頁面有些內容不能在生成的圖片內顯示網絡

之因此可以生成圖片，是由於將頁面指定的內容DOM元素轉成了canvas，在轉換的時候，並非全部的css屬性都支持，好比：box-shadow, text-overflow:ellipsis等。
所以，圖片內容出現空白的時候，建議修改css表現樣式。app

生成的canvas寬高大小，是否容許跨域圖片等，讀者可參考官方文檔進行相應設置。
生成的圖片背景默認爲白色，能夠經過backgroundColor屬性修改背景顏色，使用以下：

html2canvas(this.$refs.imageDom, { backgroundColor: null // null 表示設置背景爲透明色
})

踩坑見：http://caibaojian.com/h5-download.html

親採坑

　一、生成的圖片有偏移，顯示不完整，使用以下處理，好使

share() { var width = $('.share')[0].offsetWidth; //dom寬
        var height = $('.share')[0].offsetHeight; //dom高 // 解決圖片模糊
        var scale = 2;//放大倍數
        var canvas = document.createElement('canvas'); canvas.width = width * 2; canvas.height = height * 2; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; var context = canvas.getContext('2d'); context.scale(scale, scale); //設置context位置，值爲相對於視窗的偏移量負值，讓圖片復位(解決偏移的重點)
                var rect = $('.share').get(0).getBoundingClientRect();//獲取元素相對於視察的偏移量
        context.translate(-rect.left, -rect.top); var opts = { canvas: canvas, useCORS: true, // 【重要】開啓跨域配置
            scrollY: 0, // 縱向偏移量 寫死0 能夠避免滾動形成偶爾偏移的現象
 }; html2canvas($(".share")[0], opts).then(canvas => { // 使用toDataURL方法將圖像轉換被base64編碼的URL字符串
            var src = canvas.toDataURL(); // 顯示圖片隱藏dom（圖片生成後的操做）
            $('.share-wrap').addClass('hidden'); $('.share-canvas').removeClass('hidden'); $('.share-canvas').find('img').attr('src', src); }); }

二、報錯：失敗 - 網絡錯誤

1）quality值設置小一些 --無用

使用 canvas.toDataURL('image/jpeg',1);能夠對canvas導出內容作格式轉換，若是導出的圖片太大，能夠將quality值設置小一些，0~1,1表明無損

2）html轉canvas，再用canvas輸出爲base64圖片，base64經過url的data寫法的方式實現下載。

出現這個緣由是生成的圖片太大，接着生成的base64太長，超出了瀏覽器對於url的限制。
具體看這個博客:URL傳值問題，不一樣瀏覽器對URL的長度要求（https://blog.csdn.net/jierry_wang/article/details/6796654）

解決方法：換一種方式來下載圖片。看了下canvas有幾個方法，轉url的是toDataURL，而toBlob就是解決方案。

blob的文檔能夠參考一下這裏:細說Web API中的Blob

修改以後的代碼以下：

canvas.toBlob((blob)=>{ let eleLink = document.createElement("a"); eleLink.download = "監測數據圖"; eleLink.href = URL.createObjectURL(blob); // 轉換後的圖片地址
 document.body.appendChild(eleLink); // 觸發點擊
 eleLink.click(); // 而後移除
 document.body.removeChild(eleLink); this.genLoading = false; },'image/png',1)

不報錯了，可是仍是不行，，生成的圖片依舊不完整，以下，，可能由於個人實在是太多了（153*3個圖表）

辦法依然再找，，，先記錄到這