vue-cropper 裁剪带水印图片下载出不带水印图片

最新推荐文章于 2024-08-25 07:43:51 发布

郭志鹏

最新推荐文章于 2024-08-25 07:43:51 发布

阅读量445

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_43887531/article/details/115180906

版权

该博客介绍了如何使用 Vue-cropper 插件在裁剪过程中添加水印，并在下载时提供无水印的图片。通过渲染两个裁剪框，一个带有水印，一个不带，在带水印的裁剪框操作后，将坐标传递给无水印裁剪框，实现截图效果。同时提到了在resize过程中保持裁剪位置一致的挑战。

摘要由CSDN通过智能技术生成

vue-cropper 裁剪带水印图片下载出不带水印图片

图片添加水印

changeVisible(fObj) {
      //加水印
      var self = this
      var img = new Image()
      //原图
      img.src = imageBase64
      img.onload = e => {
        var cav = document.createElement('canvas')
        cav.width = fObj.width
        cav.height = fObj.height
        var ctx = cav.getContext('2d')

        ctx.drawImage(img, 0, 0)

        //水印优化 repeat效果
        this.repeat(ctx, cav, self, fObj.width, fObj.height)
      }
    },
    //水印优化 repeat效果
    repeat(ctx, cav, self, width, height) {
      let col = 0
      let row = 0
      var img2 = new Image()
      //水印图片 
      img2.src = '/static/image/wm.png'
      img2.onload = function () {
        col = Math.ceil(height / img2.width * 2)
        row = Math.ceil(width / img2.height * 2)
        let all = col * row
        for (let i = 0; i < all + 1; i++) {
          let numRow = parseInt(i / row)
          let numCol = i % row
          // console.log(numCol * img2.width * 2, numRow * img2.height * 2, i)
          ctx.drawImage(img2, numCol * img2.width * 2, numRow * img2.height * 2, img2.width * 2, img2.height * 2)
         //得到最终图片
          if (i == all) {
            self.imageBase64 = cav.toDataURL('image/png')
            self.option.img = self.imageBase64
          }
        }
      }
    },

2.渲染2个裁剪框