当前位置：首页 > news >正文

vue pc端项目el-upload上传图片时加水印

news 2025/7/4 11:17:07

html代码：

<a-uploadclass="avatar-uploader"list-type="picture-card":file-list="uploadFileList":custom-request="uploadDoneHandle":before-upload="beforeUpload":remove="removeHandle"v-decorator="['path', { rules: formValidateRules.path }]"@preview="previewHandle"@change="uploadChangeHandle"
><div v-if="uploadFileList.length < 1"><a-icon :type="uploadLoading ? 'loading' : 'plus'" /></div>
</a-upload>

画布这时就需要在beforeUploadHandle这个方法中去生成水印，然后通过后端上传接口，把图片传给后端，然后再接收后端返回的数据
下面是beforeUploadHandle方法

 beforeUpload (file) {return new Promise(resolve => {const reader = new FileReader()reader.readAsDataURL(file) // file转base64reader.onload = e => {const canvas = document.createElement('canvas')const img = new Image()img.src = e.target.resultimg.onload = () => {//图片加载后再添加水印，否则可能报错let width = img.widthlet height = img.heightcanvas.width = widthcanvas.height = heightconst ctx = canvas.getContext('2d') // 绘制2d图形ctx.drawImage(img, 0, 0, width, height)var basePx = canvas.width//字体大小  照片添加水印var fontSize = basePx / 20 //水印文字尺寸ctx.shadowColor = 'rgba(0, 0, 0,1)'ctx.shadowOffsetX = 3 //水印文字阴影ctx.shadowOffsetY = 3ctx.shadowBlur = 5ctx.rotate((-20 * Math.PI) / 180) //水印文字倾斜ctx.font = fontSize + 'px 微软雅黑'ctx.fillStyle = 'rgba(255,255,255,0.6)' //水印透明度var watermark =sessionStorage.getItem('id') +'|' +sessionStorage.getItem('name') +'|' +sessionStorage.getItem('orgName') //水印文字内容var watermarkSplit = watermark.split('|')let w = 1 //横向绘制次数let h = 4 //纵向绘制次数'//水印的总绘制次数let num = Math.round(w * h)for (let i = 0; i < num; i++) {if (i < w) {ctx.fillText(watermarkSplit[0],(width / 3) * i,height / 2 - 2.7 * fontSize)ctx.fillText(watermarkSplit[1],(width / 3) * i,height / 2 - 1.5 * fontSize)ctx.fillText(watermarkSplit[2],(width / 3) * i,height / 2 - 0.5 * fontSize)} else if (i >= w && i < w * 2) {ctx.fillText(watermarkSplit[0],(width / 3) * (i - w),height - 2.7 * fontSize)ctx.fillText(watermarkSplit[1],(width / 3) * (i - w),height - 1.5 * fontSize)ctx.fillText(watermarkSplit[2],(width / 3) * (i - w),height - 0.5 * fontSize)} else if (i >= w * 2 && i < w * 3) {ctx.fillText(watermarkSplit[0],(width / 3) * (i - w * 2),height * 1.5 - 2.7 * fontSize)ctx.fillText(watermarkSplit[1],(width / 3) * (i - w * 2),height * 1.5 - 1.5 * fontSize)ctx.fillText(watermarkSplit[2],(width / 3) * (i - w * 2),height * 1.5 - 0.5 * fontSize)}}var dataBase64 = canvas.toDataURL(file.type) // 输出压缩后的base64// base64转fileconst arr = dataBase64.split(',')const mime = arr[0].match(/:(.*?);/)[1]const bstr = atob(arr[1])let n = bstr.lengthconst u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}const files = new File([new Blob([u8arr], { type: mime })],file.name,{ type: file.type })files.uid = file.uidresolve(files)}}})/* const { result } = fileCheckForImage(file)return result */},