添加下载图片水印

src/views/co-ai/imageFunction.ts

@@ -0,0 +1,82 @@
+import imgList from './image/logoWatermark.png';
+export const imgToCanvas = async (url: string) => {
+  console.log('imgToCanvas', url);
+  const img = document.createElement('img');
+  img.setAttribute('crossOrigin', 'anonymous');
+  // img.src = url+`?${new Date().getTime()}`
+  // 为了处理base64 和 连接加载不同的
+  if (url && typeof url == 'string' && url.includes('data:image')) {
+    img.src = url;
+  } else {
+    img.src = url + `?${new Date().getTime()}`;
+  }
+  // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
+  await new Promise(resolve => (img.onload = resolve));
+
+  // 创建canvas DOM元素，并设置其宽高和图片一样
+
+  const canvas = document.createElement('canvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+  // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
+  let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+  ctx.fillStyle = 'rgb(255, 255, 255)';
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(0, 0, img.width, img.height);
+  ctx.drawImage(img, 0, 0);
+  return canvas;
+};
+
+/* canvas添加水印
+
+* @param {canvas对象} canvas
+
+* @param {水印文字} text
+
+*/
+
+export const addWatermark = async (canvas: any) => {
+  try {
+    const ctx = canvas.getContext('2d');
+    // ctx.fillStyle = '#fff'
+    const img = document.createElement('img');
+    img.setAttribute('crossOrigin', 'anonymous');
+
+    // 为了处理base64 和 连接加载不同的
+    if (
+      imgList &&
+      typeof imgList == 'string' &&
+      imgList.includes('data:image')
+    ) {
+      img.src = imgList;
+    } else {
+      img.src = imgList;
+    }
+
+    // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
+    await new Promise(resolve => (img.onload = resolve));
+
+    // 创建canvas DOM元素，并设置其宽高和图片一样
+    const water = document.createElement('canvas');
+    water.width = 300;
+    water.height = 200;
+    // 小水印画布大小
+
+    // 第一层
+    const waterCtx = water.getContext('2d') as CanvasRenderingContext2D;
+    waterCtx.clearRect(0, 0, water.width, water.height);
+    // 小水印中文字偏转角度
+    waterCtx.drawImage(img, 100, 0);
+    const pat = ctx.createPattern(water, 'repeat');
+    ctx.fillStyle = pat;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    return canvas;
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const convasToImg = (canvas: any, type = 1) => {
+  return canvas.toDataURL('image/png', type);
+};

src/views/co-ai/index.tsx

@@ -41,6 +41,7 @@ import { usePageVisibility } from '@vant/use';
 import TheVip from '@/components/the-vip';
 import request from '@/helpers/request';
 import { useRoute } from 'vue-router';
+import { addWatermark, convasToImg, imgToCanvas } from './imageFunction';
 export default defineComponent({
   name: 'co-ai',
   setup() {
@@ -170,11 +171,14 @@ export default defineComponent({
           useCORS: true
         })
           .then(async canvas => {
-            var dataURL = canvas.toDataURL('image/png', 1); //可选取多种模式
+            // 添加水印
+            const waterCanvasImg = await addWatermark(canvas);
+            // canvas转图片
+            const dataURL = await convasToImg(waterCanvasImg);
             setTimeout(() => {
               showToast('已保存到相册');
             }, 500);
-            const res = await promisefiyPostMessage({
+            await promisefiyPostMessage({
               api: 'savePicture',
               content: {
                 base64: dataURL