后台管理系统

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);
})
}