html2canvas頁面生成圖片並添加水印

安裝：yarn add html2canvas

引用：

import html2canvas from 'html2canvas';

使用：

 //導出圖片
            printOut(name) {
                let dom = document.querySelector('#main');
                let img = document.querySelector('#watermark');
                html2canvas(dom, {
                    useCORS: true, //支持圖片跨域
                    scale: 1, //設置放大的倍數
　　　　　　　　　　　　// 頁面有滾動條時設置，若不加導出圖片為當前可視區域
                    height: document.getElementById('main').scrollHeight,
                    windowHeight: document.getElementById('main').scrollHeight,
                    backgroundColor:null
                }).then((canvas) => {
　　　　　　　　　　　　//添加水印 
                    let ctx = canvas.getContext("2d");
                    const water = document.createElement('canvas');
                    water.width=260;
                    water.height=300;
                    const waterCtx = water.getContext("2d");
                    waterCtx.drawImage(img, 30, 60);
                    const pat = ctx.createPattern(water,'repeat');
                    ctx.fillStyle=pat;
                    ctx.fillRect(0,0,canvas.width,canvas.height)
                    // 生成圖片導出
                    const a = document.createElement('a');
                    a.href = canvas.toDataURL('image/png');
                    a.download = name;
                    a.click();

                })
            },

var img = new Image();

//引入圖片地址

img.src = "img/watermark.jpg"

img.onload = function () {
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
}

　　此處水印是圖片，使用圖片地址（如上方式）一直不成功，所以使用了dom 的方式，添加在頁面內隱藏

　　大佬有解決方案的話，歡迎留言指正