vue + vant 上传图片前加水印、压缩图片大小

没有废话直接上代码
另外使用了 image-conversion 来压缩图片

<template>
  <div class="page">
    <div>
      <van-uploader
        :accept="'image/*'"
        :before-read="beforeRead"
        :after-read="onUpload"
      >
        <!-- <van-button type="primary">主要按钮</van-button> -->
      </van-uploader>
    </div>
    <img :src="imgUrl" alt="" style="width: 100%">
  </div>
</template>
<script>
import { compressAccurately } from 'image-conversion'
export default {
  data () {
    return {
      imgUrl: ''
    }
  },
  methods: {
    beforeRead (file) {
      return new Promise((resolve) => {
        const fileName = file.name
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          this.getImgUrl({
            url: reader.result,
            cb: (base64) => {
              this.imgUrl = base64
              const file = this.base64ToFile(base64, fileName)
              compressAccurately(file, 500).then(res => {
                resolve(res)
              }).catch(() => {
                this.$toast('上传图片失败')
              })
            }
          })
        }
      })
    },
    onUpload (file) {
      console.log('upload', file)
    },
    base64ToFile (urlData, fileName) {
      const arr = urlData.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bytes = atob(arr[1]) // 解码base64
      let n = bytes.length
      const ia = new Uint8Array(n)
      while (n--) {
        ia[n] = bytes.charCodeAt(n)
      }
      return new File([ia], fileName, { type: mime })
    },
    getImgUrl ({
      url = '',
      textAlign = 'center',
      textBaseline = 'center',
      fillStyle = 'rgba(238, 10, 36, 0.5)',
      content = '我是水印哈哈哈',
      font = '40px Arial',
      cb = null,
      textX = 100,
      textY = 70
    }) {
      const img = new Image()
      img.src = url
      img.crossOrigin = 'anonymous'
      img.onload = function () {
        const canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0)
        ctx.textAlign = textAlign
        ctx.textBaseline = textBaseline
        ctx.font = font
        ctx.fillStyle = fillStyle
        ctx.translate((img.width + textX) / 2, (img.height + textY) / 2)
        ctx.rotate((Math.PI / 180) * -30)
        ctx.translate(-(img.width + textX) / 2, -(img.height + textY) / 2)
        // 单独绘制水印
        ctx.fillText(content, img.width / 2, img.height / 2)
        // 循环绘制水印
        // for (let i = 0; i < img.height / 120; i++) {
        //   for (let j = 0; j < img.width / 30; j++) {
        //     ctx.fillText(content, i * 200, j * 100, img.width)
        //   }
        // }
        // 将绘制完成的canvas转换为base64的地址
        const base64Url = canvas.toDataURL()
        // return base64Url
        cb && cb(base64Url)
      }
    }
  }
}
</script>

参考链接
1、设置图片中心点旋转
https://blog.csdn.net/u014520...
2、图片转base64
https://blog.csdn.net/qq_2513...
3、vue项目中图片显示前端使用js添加水印
https://blog.csdn.net/weixin_...
4、vue项目中base64转file
https://blog.csdn.net/danby2/...

你就是很有想法。

345 声望
10 粉丝
0 条评论
推荐阅读
从script标签引入AES.js进行加密
{代码...}

原谅我一生不羁放歌搞文艺阅读 434

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

你就是很有想法。

345 声望
10 粉丝
宣传栏