Vue中Html2canvas的使用

Html2canvas是什么?

是一個腳本這個腳本可以允許用戶直接在瀏覽器上拍攝網(wǎng)頁或其中一部分的"屏幕截圖".屏幕截圖是基于DOM,因此可能無法真實表示100％的準確度，因為它無法生成實際的屏幕截圖症昏，而是根據(jù)頁面上的可用信息構(gòu)建屏幕截圖盛霎。

運行過程?

腳本遍歷加載頁面的DOM厚柳。它收集那里所有元素的信息宵溅，然后將其用于構(gòu)建頁面的表示形式轩猩。換句話說，它實際上并不截取頁面的屏幕快照荡碾，而是根據(jù)它從DOM讀取的屬性來構(gòu)建頁面的表示形式谨读。所以可能有些這個腳本識別不了的css或者html將會在編譯過程中失效!

局限性

腳本使用的所有圖像都必須位于相同的來源，以便它無需代理即可讀取它們玩荠。同樣漆腌，如果canvas 頁面上還有其他元素被跨域內(nèi)容污染贼邓，它們將變臟并且無法被html2canvas讀取阶冈。
該腳本不會呈現(xiàn)Flash或Java applet之類的插件內(nèi)容。

安裝

npm i html2canvas

導入

import html2canvas from html2canvas

用法

html

<button  class="restore-btn"  @click="saveImage('html2canvas', '狗蛋')">生成圖片</button>
<div id="html2canvas" ref="html2canvas">
截取內(nèi)容
</div>

//圖片格式轉(zhuǎn)換方法
       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 });
        },
 //點擊方法
       saveImage(divText, imgText) {
            let canvasID = this.$refs[divText];
            let that = this;
            let a = document.createElement('a');
            html2canvas(canvasID).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'));
                a.setAttribute('href', URL.createObjectURL(blob));
                //這塊是保存圖片操作  可以設(shè)置保存的圖片的信息
                a.setAttribute('download', imgText + '.png');
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(blob);
                document.body.removeChild(a);
            });
        },

關(guān)于網(wǎng)絡圖片截取不了是因為跨域,上面說過腳本使用的所有圖像都必須位于相同的來源,這里我們只需要給圖片上增加一個屬性crossOrigin="Anonymous"塑径，以及對應后臺做跨域處理就行了

轉(zhuǎn)載于http://www.reibang.com/p/d07f5382b975

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者