修改水印

1

src/helpers/imageFunction.ts

@@ -1,3 +1,4 @@
+import imgList from './images/logoWatermark.png'
 export const imgToCanvas = async (url: string) => {
   const img = document.createElement('img')
 
@@ -30,28 +31,46 @@ export const imgToCanvas = async (url: string) => {
 
 */
 
-export const addWatermark = (canvas, text) => {
-  const ctx = canvas.getContext('2d')
-  // ctx.fillStyle = '#fff'
-
-  const water = document.createElement('canvas')
-  // 小水印画布大小
-  water.width = 500
-  water.height = 300
-
-  // 第一层
-  const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
-  waterCtx.clearRect(0, 0, water.width, water.height)
-  // 小水印中文字偏转角度
-  waterCtx.rotate((-25 * Math.PI) / 180)
-  // waterCtx.translate(-30, -30)
-  waterCtx.font = '50pt Calibri' // 水印文字添加
-  waterCtx.fillStyle = 'rgba(149,155,170,0.2)'
-  waterCtx.fillText('酷乐秀', -10, 180)
-  const pat = ctx.createPattern(water, 'repeat')
-  ctx.fillStyle = pat
-  ctx.fillRect(0, 0, canvas.width, canvas.height)
-  return canvas
+export const addWatermark = async (canvas, text) => {
+  try {
+    const ctx = canvas.getContext('2d')
+    // ctx.fillStyle = '#fff'
+    const img = document.createElement('img')
+
+    img.src = imgList
+
+    img.setAttribute('crossOrigin', 'anonymous') // 防止跨域引起的 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 = 600
+    water.height =500
+    // 小水印画布大小
+    // water.width = 444
+    // water.height = 141
+    // 444 141
+
+    // 第一层
+    const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
+    waterCtx.clearRect(0, 0, water.width, water.height)
+    // 小水印中文字偏转角度
+    waterCtx.rotate((-30 * Math.PI) / 180)
+    // waterCtx.translate(-30, -30)
+    // waterCtx.font = '50pt Calibri' // 水印文字添加
+    // waterCtx.fillStyle = 'rgba(149,155,170,0.2)'
+    // waterCtx.fillText('酷乐秀', -10, 180)
+    waterCtx.drawImage(img, 0, 300)
+    const pat = ctx.createPattern(water, 'repeat')
+    ctx.fillStyle = pat
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+    console.log('加水印',canvas)
+    return canvas
+  } catch (e) {
+    console.log(e)
+  }
 }
 
 export const addMusicTitle = (canvas, info) => {
@@ -60,16 +79,15 @@ export const addMusicTitle = (canvas, info) => {
 
   // 小水印画布大小
   water.width = canvas.width
-  water.height = canvas.height+30;
+  water.height = canvas.height + 30
   const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
-  console.log(water,waterCtx,)
   waterCtx.fillStyle = '#fff'
-  waterCtx.fillRect(0, 0,  canvas.width, canvas.height+70)
+  waterCtx.fillRect(0, 0, canvas.width, canvas.height + 70)
   waterCtx.font = `40pt Calibri`
   waterCtx.fillStyle = '#000'
   waterCtx.textAlign = 'center'
   waterCtx.drawImage(canvas, 0, 70)
-  waterCtx.fillText(info.title, canvas.width/2, 120, )
+  waterCtx.fillText(info.title, canvas.width / 2, 120)
   return water
 }
 

src/views/muiscDetial/index.tsx

@@ -179,7 +179,7 @@ export default defineComponent({
             async e => {
               console.log(e)
               state.imgData = e.data
-              // printHander()
+
               // alert(e.data);
               const tempCanvas = await imgToCanvas(state.imgData)
               const showImg = convasToImg(tempCanvas)
@@ -255,6 +255,7 @@ export default defineComponent({
           history.pushState(null, '', document.URL);
           window.addEventListener('popstate', goIndex, false);
         }
+
       // 拼链接
     })
     onDeactivated(()=>{
@@ -357,11 +358,13 @@ export default defineComponent({
         title: state.musicDetail.musicSheetName,
         size: 18
       })
-      const canvas = addWatermark(titleCanvas, '酷乐秀')
+      const canvas = await addWatermark(titleCanvas, '酷乐秀')
+
       const imgUrl = convasToImg(canvas)
       const link = document.createElement('a')
       link.setAttribute('download', state.musicDetail.musicSheetName + '.png')
       // 添加时间戳，防止浏览器缓存图片
+      // console.log(imgUrl,'imgUrl')
       state.imgUrl = imgUrl
       link.href = imgUrl
       link.click()
@@ -678,7 +681,7 @@ export default defineComponent({
                   </div>
 
                 </div>
-                {/* <img src={state.imgUrl} alt="" /> */}
+
               </div>
             </div>
           </div>