标签：water canvas img 水印 html2canvas 图片 document 页面

安装：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 的方式，添加在页面内隐藏

　　大佬有解决方案的话，欢迎留言指正

标签：water,canvas,img,水印,html2canvas,图片,document,页面
来源： https://www.cnblogs.com/Kyaya/p/15920045.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。