Vue 图片上传添加水印文字/水印图片

图片上传之前的处理（添加水印）；可以是上传图片到后台也可以是到OSS 原理都是一样

beforeUpload(file) {
                return new Promise((resolve, reject) => {
                    // 1.调用方法1： 把文件转换为base64字符串
                    fileByBase64(file, async (base64) => {   
                        // 2. 调用方法2：把base64转换为Canvas
                        let tempCanvas = await this.imgToCanvas(base64)
                        //3.调用方法3： 写入水印到Canvas
                        const canvas = this.addWatermark(tempCanvas, '看看账号网');
                        //4. 调用方法4：把Canvas转换为image文件
                        const img = this.convasToImg(canvas) 
                        //5.调用方法5：被image转换为File文件(第二个参数为文件名)
                        let newFile = base64ToFile(img.src, file.name) 
                        resolve(newFile)
                    })
                })
            },

　　

方法一：File文件转换为Base64字符串（until）

/**
 * 文件转base64
 * @param  file 文件流
 * @param  callback 回调函数
 */
export function fileByBase64(file, callback) {
  let reader = new FileReader();
  // 传入一个参数对象即可得到基于该参数对象的文本内容
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    // target.result 该属性表示目标对象的DataURL
    callback(e.target.result)
  };
}

方法2：Base64转Canvas-使用页面中

 /**
             * Base64转成canvas
             * @param  base64
             */
            async imgToCanvas(base64) {
                // 创建img元素
                const img = document.createElement('img')
                img.setAttribute('src', base64)
                await new Promise((resolve) => (img.onload = resolve))
                // 创建canvas DOM元素，并设置其宽高和图片一样
                const canvas = document.createElement('canvas')
                canvas.width = img.width
                canvas.height = img.height
                // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
                canvas.getContext('2d').drawImage(img, 0, 0)

                return canvas
            },

方法3：添加水印

/**
             * canvas添加水印
             * @param  canvas 对象
             * @param text 水印文字
             */
            addWatermark(canvas, text) {
                const ctx = canvas.getContext('2d')
                // 给上传的图片添加-水印图片
                ctx.drawImage(this.$refs.waterImg, 0, 0)

                // 一下是给图添加  水印文字的方法
                // 设置字体大小和字体
                // ctx.font = '20px Arial'; 
                // ctx.rotate(-0.4);// 设置文字旋转角度
                // 创建实心水印
                // ctx.strokeStyle = 'rgba(0,0,0,.8)';
                // ctx.fillText(text, (canvas.width)*(0.1), (canvas.height)*(0.1))
                // ctx.fillText(text, canvas.width / 2, canvas.height / 2)
                // 创建虚心水印
                // ctx.strokeStyle = 'rgba(0,0,0,.8)';
                // ctx.strokeText(text, (canvas.width)*(0.1), (canvas.height)*(0.15));
                // ctx.strokeText(text, (canvas.width)*(0.1), (canvas.height)*(0.45));
                // ctx.strokeText(text, canvas.width / 2, canvas.height / 2)
                return canvas
            },

其中添加水印图片的话，用drawimg 但是一定要注意 img 的属性，这里用的是本地图片

<img ref="waterImg" src="../../../static/water_pc.png" crossorigin="Anonymous" />

有时候背景图很大，需要将水印图片平铺铺满一下方法

async addWatermark(canvas, text) {
                const ctx = canvas.getContext('2d')
                // 给上传的图片添加-水印图片
                // 创建平铺样式
                const pattern = ctx.createPattern(this.$refs.waterImg, 'repeat');
                // 应用平铺样式
                ctx.fillStyle = pattern;
                // 在画布上平铺
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                return canvas
            },

 

方法4：Canvas转图片文件（Image）

 /**
     * canvas转成img
     * @param {canvas对象} canvas
     */
    convasToImg(canvas) {
      // 新建Image对象，可以理解为DOM
      let image = new Image()
      // canvas.toDataURL 返回的是一串Base64编码的URL
      // 指定格式 PNG
      image.src = canvas.toDataURL('image/png')
      return image
    },

方法5：图片文件(Image)转文件(File)-until

/**
 * 
 * @param urlData  base64
 * @param fileName 文件名称
 * @returns {File}
 */
export function base64ToFile (urlData, fileName){
  let arr = urlData.split(',');
  let mime = arr[0].match(/:(.*?);/)[1];
  let bytes = atob(arr[1]); // 解码base64
  let n = bytes.length
  let ia = new Uint8Array(n);
  while (n--) {
    ia[n] = bytes.charCodeAt(n);
  }
  return new File([ia], fileName, { type: mime });
}