优化导出图片加水印

src/pages/Detail/exportExcelImg.js

@@ -13,43 +13,90 @@ function blobToImg(blob) {
   });
 }
 
-async function imgToCanvas(img) {
+async function imgToCanvas(data64, textBlob) {
   let canvas = document.createElement('canvas');
   let ctx = canvas.getContext('2d');
   return new Promise((resolve, reject) => {
+    let img = new Image();
+    img.src = data64;
+    // document.body.appendChild(img);
     img.onload = () => {
       canvas.width = img.width;
       canvas.height = img.height;
       ctx.drawImage(img, 0, 0);
+      // let img2 = new Image();
+      // const url = URL.createObjectURL(textBlob);
+      // img2.src = url;
+      // img2.onload = () => {
+      //   const row = canvas.width / img2.width;
+      //   const col = canvas.height / img2.height;
+      //   for (let i = 0; i < row; i++) {
+      //     for (let j = 0; j < col; j++) {
+      //       ctx.drawImage(img2, i * 200, j * 200, 200, 200);
+      //     }
+      //   }
+      //   canvas.toBlob(blob => {
+      //     console.log(blob);
       resolve(canvas);
+      //   });
+      // };
     };
   });
 }
 
-function watermark(canvas, text) {
+async function textToCanvas(text) {
+  let canvas = document.createElement('canvas');
+  let ctx = canvas.getContext('2d');
+  canvas.width = 200;
+  canvas.height = 200;
+
   return new Promise((resolve, reject) => {
-    let ctx = canvas.getContext('2d');
     // 设置填充字号和字体，样式
     ctx.font = '24px 宋体';
     ctx.fillStyle = '#92dfff';
     // 设置右对齐
-    ctx.textAlign = 'right';
-    // 在指定位置绘制文字，这里指定距离右下角20坐标的地方
-    ctx.fillText(text, canvas.width - 20, canvas.height - 20);
+    ctx.textAlign = 'center';
+    ctx.save();
+    ctx.translate(100, 100);
+    ctx.rotate((45 * Math.PI) / 180);
+    ctx.fillText(text, 0, 0);
     canvas.toBlob(blob => {
-      console.log(blob);
       resolve(blob);
     });
   });
 }
+
+async function textBlobToCanvas(canvas, textBlob) {
+  let ctx = canvas.getContext('2d');
+  return new Promise((resolve, reject) => {
+    let img = new Image();
+    const url = URL.createObjectURL(textBlob);
+    img.src = url;
+    img.onload = () => {
+      const row = canvas.width / img.width;
+      const col = canvas.height / img.height;
+      for (let i = 0; i < row; i++) {
+        for (let j = 0; j < col; j++) {
+          ctx.drawImage(img, i * 200, j * 200, 200, 200);
+        }
+      }
+      canvas.toBlob(blob => {
+        console.log(blob);
+        resolve(blob);
+      });
+    };
+  });
+}
+
 export default async function(data64, text = '金科环境') {
-  let img = new Image();
-  img.src = data64;
-  document.body.appendChild(img);
-  let canvas = await imgToCanvas(img);
-  let blob = await watermark(canvas, text);
-  let newImage = await blobToImg(blob);
+  //获取text绘制到画布，获取blob信息
+  const textBlob = await textToCanvas(text);
+  //excel内容绘制到画布
+  let canvas = await imgToCanvas(data64);
+  //将textBlob平铺到画布上
+  let blob = await textBlobToCanvas(canvas, textBlob);
+
+  // let newImage = await blobToImg(blob);
   const url = URL.createObjectURL(blob);
   downloadFile(url, '111');
-  // return URL.createObjectURL(blob);
 }