1.实现点击导出dom并加水印 --封装工具`
import html2canvas from 'html2canvas'
export function htmltoimg(dom){
html2canvas(dom).then(canvas => {
// dom.appendChild(canvas);
// console.log(canvas.toDataURL());
var img = new Image()
var cxt = canvas.getContext("2d");
img.src = canvas.toDataURL();
img.onload=function(){//图片加载完成,才可处理
cxt.drawImage(img,0,0,canvas.width,canvas.height);
// cxt.save();
// cxt.font = '20px microsoft yahei';
// // cxt.textBaseline = 'middle';//更改字号后,必须重置对齐方式,否则居中麻烦。设置文本的垂直对齐方式
// // cxt.textAlign = 'center';
// // var tw = cxt.measureText('text').width;
// // var ftop = canvas.height/2;
// // var fleft = canvas.width/2;
// cxt.fillStyle="#ff0000";
// // cxt.fillRect(fleft-tw/2,ftop-'80'/2,tw,'80');//矩形在画布居中方式
// cxt.fillStyle="#ffffff";
// cxt.fillText('text');//文本元素在画布居中方式
// cxt.strokeStyle = 'yellow';
// cxt.strokeText('text');//文字边框
for (let i = 0; i < 20; i++) {
cxt.rotate((-45 * Math.PI) / 180); // 水印初始偏转角度
cxt.font = "30px microsoft yahei";
cxt.fillStyle = "rgba(0,0,0,0.5)";
var str = 'abc '.repeat(20)
cxt.fillText(str,-300,i * 250);
cxt.rotate((45 * Math.PI) / 180); // 把水印偏转角度调整为原来的,不然他会一直转
}
};
dom.appendChild(canvas);
})
}
import html2canvas from ‘html2canvas’
export function htmltoimg(dom){
html2canvas(dom).then(canvas => {
// dom.appendChild(canvas);
// console.log(canvas.toDataURL());
var img = new Image()
var cxt = canvas.getContext(“2d”);
img.src = canvas.toDataURL();
img.οnlοad=function(){//图片加载完成,才可处理
cxt.drawImage(img,0,0,280,280,0,0,280,280);
cxt.save();
cxt.font = ‘80’+“px Arial”;
cxt.textBaseline = ‘middle’;//更改字号后,必须重置对齐方式,否则居中麻烦。设置文本的垂直对齐方式
cxt.textAlign = ‘center’;
var tw = cxt.measureText(‘text’).width;
var ftop = canvas.height/2;
var fleft = canvas.width/2;
cxt.fillStyle="#ff0000";
cxt.fillRect(fleft-tw/2,ftop-‘80’/2,tw,‘80’);//矩形在画布居中方式
cxt.fillStyle="#ffffff";
cxt.fillText(‘text’,fleft,ftop);//文本元素在画布居中方式
cxt.strokeStyle = ‘yellow’;
cxt.strokeText(‘text’,fleft,ftop);//文字边框
};
dom.appendChild(canvas);
})
}