图片上传之前的处理(添加水印);可以是上传图片到后台也可以是到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" />
方法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 }); }
标签:canvas,Vue,img,base64,ctx,水印,let,图片 From: https://www.cnblogs.com/haonanZhang/p/18063324