使用html2canvas實現將html內容寫入到canvas中生成圖片

以前咱們簡單的瞭解了canvas的基本用法,這裏咱們來了解下如何將html內容寫入到canvas中生成圖片，這裏我使用到了html2canvas插件，這個插件是基於canvas實現的

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

一：下載html2canvas插件

1：直接下載html2canvas插件

直接點擊html2canvas.min.js，而後直接ctrl+s進行保存便可

2：使用npm進行下載

npm install html2canvas

二：html2canvas使用介紹

在html2canvas中主要使用兩種方法

1：將html內容寫入到canvas中

html2canvas(element，options).then((canvas) =>{})

參數說明：

element：須要將html內容寫入canvas的jQuery對象

options：配置信息

經常使用的配置基本信息：

scale：縮放比例,默認爲1

allowTaint：是否容許跨域圖像污染畫布，默認爲false

useCORS：是否嘗試使用CORS從服務器加載圖像，默認爲false

width：canvas畫布的寬度,默認爲jQuery對象的寬度

height：canvas畫布的高度,默認爲jQuery對象的高度

backgroundColor：/畫布的背景色，默認爲透明(#fff),參數能夠爲#表示的顏色，也能夠使用rgba

2：將canvas畫布信息轉化爲base64格式圖片

canvas.toDataURL("image/png")

若是你的html內容中有指定的內容不寫入到canvas中的話，你能夠給標籤添加以下屬性

data-html2canvas-ignore="true"

三：簡單實例

1：引入html2canvas

<script src="js/html2canvas.min.js"></script>

或者使用import引入html2canvas

import html2canvas from 'html2canvas';

2：須要轉化的的html內容

<div class="capture">
    <img src="./wj.jpg" alt="">
    <div>
        <span style="color: #f00;letter-spacing: 20px">這是文字文字</span>
        <span data-html2canvas-ignore="true">不寫入canvas</span>
    </div>
</div>

3：將html內容寫入canvas並轉化爲base64圖片

html2canvas(document.getElementsByClassName("capture")[0], {
        scale: 2,//縮放比例,默認爲1
        allowTaint: false,//是否容許跨域圖像污染畫布
        useCORS: true,//是否嘗試使用CORS從服務器加載圖像
        width: '500',//畫布的寬度
        height: '500',//畫布的高度
        backgroundColor: '#000000',//畫布的背景色，默認爲透明
    }).then((canvas) => {
        //將canvas轉爲base64格式
        var imgUri = canvas.toDataURL("image/png");
    });

這裏注意jQuery對象是document.getElementsByClassName("capture")[0]而不是document.getElementsByClassName("capture")，document.getElementsByClassName("capture")是DOM原生對象而不是jQuery對象

根據如上就能夠實現將html內容寫入canvas並轉化爲base64圖片，這時候咱們就能夠將base64內容傳到服務端，服務端能夠將圖片進行保存起來