El-Upload组件上传图片并添加水印

背景

有的时候我们需要在上传图片中添加一些水印标识，然后上传至服务器

效果图

代码

<template><div class="app"><!--    需求：1. 点击直接预览图片，而不需要使用dialog2. 上传图片添加水印后才预览图片思路：上传图片文件添加水印。使用watermarkjs库转换将添加水印的图片转换成base64,更新预览图片的内容保存添加水印后的文件自行上传服务器....--><el-uploadaction=""list-type="picture-card":multiple="true":on-change="handleUploadChange":auto-upload="false"><i slot="default" class="el-icon-plus"></i><div slot="file" slot-scope="{ file }"><img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i><!-- <el-imagestyle="width: 100px; height: 100px":src="dialogImageUrl":preview-src-list="[dialogImageUrl]"></el-image> --></span><span class="el-upload-list__item-delete" @click="handleRemove(file)"><i class="el-icon-delete"></i></span></span></div></el-upload><!-- 预览图片方式1：使用dialog方式<el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog> --><!-- 预览图片方式2：使用image-viewer --><el-image-viewerv-if="imgViewerVisible":url-list="imgList":on-close="closeImgViewer"/><div class="demo" ref="demoRef"></div></div>
</template><script>
import watermark from 'watermarkjs'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'export default {components: {ElImageViewer,},data() {return {dialogImageUrl: '',dialogVisible: false,imgViewerVisible: false,imgList: [],}},methods: {handlePictureCardPreview(file) {// this.dialogImageUrl = file.url// this.dialogVisible = truethis.imgViewerVisible = truethis.imgList = [file.url]// 解决预览放大后滚动鼠标页面跟着滚动的问题const m = (e) => {e.preventDefault()}document.body.style.overflow = 'hidden'document.addEventListener('touchmove', m, false) // 禁止页面滑动},closeImgViewer() {this.imgViewerVisible = falseconst m = (e) => {e.preventDefault()}document.body.style.overflow = 'auto'document.removeEventListener('touchmove', m, true)},handleRemove(file) {console.log(file)},handleUploadChange(file, fileList) {// console.log('file:', file)// console.log('fileList:', fileList)const upload_file = file.raw// 1. 添加单个水印// watermark([upload_file])//   .image(//     watermark.text.upperRight(//       'watermark.js',//       '48px Josefin Slab',//       '#fff',//       0.5,//       48//     )//   )//   .then((img) => {//     img.style.width = '300px'//     img.style.height = 'auto'//     this.$refs.demoRef.append(img)//   })// 2. 添加多个水印// watermark([upload_file])//   .image(//     watermark.text.upperRight(//       '呵呵呵',//       '48px Josefin Slab',//       '#fff',//       0.5,//       48//     )//   )//   .render()//   .image(//     watermark.text.upperLeft(//       '哈哈哈',//       '48px Josefin Slab',//       '#fff',//       0.5,//       48//     )//   )//   .then((img) => {//     img.style.width = '300px'//     img.style.height = 'auto'//     this.$refs.demoRef.append(img)//   })// 3. 自定义添加水印位置，比如：设置在右上角// @param {HTMLCanvasElement} canvas// @param {TextMetrics} metrics// @param {CanvasRenderingContex2D} context - context of the canvas// 设置水印的x坐标var x = function (canvas, metrics, context) {// 微调,比如:-20  根据实际调整return canvas.width - metrics.width - 20}// 设置水印的y坐标var y = function (canvas, metrics, context) {return metrics.hangingBaseline + 10}watermark([upload_file]).image(watermark.text.atPos(x,y,'上传时间:2024-05-08 22:40:10','48px sans-serif','#fff',0.8)).then((img) => {// img.style.width = '300px'// img.style.height = 'auto'this.$refs.demoRef.append(img)// 将base64转文件形式const watermark_file = this.dataURLtoFile(img.src, file.name)// 下载文件// this.downloadFile(watermark_file)this.transformFileToBase64(watermark_file, file)})},// 将base64转文件dataURLtoFile(dataurl, filename) {var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime })},// 下载文件downloadFile(file) {let aTag = document.createElement('a') //创建一个a标签aTag.download = file.namelet href = URL.createObjectURL(file) //获取urlaTag.href = hrefaTag.click()URL.revokeObjectURL(href) //释放url},// 将水印文件转换成base64,然后修改原有file对象的url，这样保证预览时图片的url是带有水印的transformFileToBase64(watermark_file, file) {return new Promise((resolve, reject) => {// 读取文件const reader = new FileReader()//readAsDataURL()方法： 读取文件内容，结果用data:url的字符串形式表示reader.readAsDataURL(watermark_file)// 读取成功回调reader.onload = () => {file.url = reader.result}})},},
}
</script><style lang="less" scoped></style>

参考文档

• FileReader()读取文件、图片上传预览
  https://www.cnblogs.com/libo-web/p/15766987.html
• Element-ui中 使用图片查看器（el-image-viewer) 预览图片
  https://juejin.cn/post/7084856145277354020