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

使用html2canvas插件 

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

1、安裝：

npm install --save html2canvas

2、在需要使用的vue組件中引入： 

import html2canvas from "html2canvas"

3、將制定區域內轉成圖片 

　　添加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 格式
    });
}    

4、創建隱藏的可下載鏈接  --- 必須同源（訪問的網站域名與服務器域名一致）才能下載

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

5、不同源下載問題

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表現樣式。

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

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

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

 

親采坑

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

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);
        });
}

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

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個圖表）

 

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