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

html代码:

html 复制代码
<a-upload
    class="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方法

javascript 复制代码
 beforeUpload (file) {
      return new Promise(resolve => {
        const reader = new FileReader()
        reader.readAsDataURL(file) // file转base64
        reader.onload = e => {
          const canvas = document.createElement('canvas')
          const img = new Image()
          img.src = e.target.result
          img.onload = () => {
            //图片加载后再添加水印,否则可能报错
            let width = img.width
            let height = img.height
            canvas.width = width
            canvas.height = height
            const 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 = 3
            ctx.shadowBlur = 5
            ctx.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转file
            const arr = dataBase64.split(',')
            const mime = arr[0].match(/:(.*?);/)[1]
            const bstr = atob(arr[1])
            let n = bstr.length
            const 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.uid
            resolve(files)
          }
        }
      })
      /* const { result } = fileCheckForImage(file)
            return result */
    },
相关推荐
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
前端君9 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_61410 小时前
Web前端面试题(2)
前端
知识分享小能手10 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队11 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光11 小时前
css之一个元素可以同时应用多个动画效果
前端·css