vue实现上传图片添加水印

本文实例为大家分享了vue上传图片添加水印的具体实现代码,供大家参考,具体内容如下

1、封装添加水印方法

/**
 * 添加水印
 * @param {blob} file
 * @param {string} el
 * @returns {Promise}
 */
export async function addWaterMarker(file, el = '#markImg') {
  return new Promise(async (resolve, reject) => {
    try {
      // 先压缩和旋转图片
      file = await compressor(file)
      // 将文件blob转换成图片
      let img = await blobToImg(file)

      // 创建canvas画布
      let canvas = document.createElement('canvas')
      canvas.width = img.naturalWidth
      canvas.height = img.naturalHeight
      let ctx = canvas.getContext('2d')

      // 填充上传的图片
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 生成水印图片
      const markEle = document.querySelector(el)
      const markWidth = markEle.clientWidth
      const scale = canvas.width * 0.25 / markWidth
      // 先缩放水印再转成图片
      markEle.style.transform = `scale(${scale})`
      const markImg = await htmlToCanvas(markEle)

      // 填充水印
      ctx.drawImage(markImg, canvas.width - markImg.width - 15 * scale, canvas.height - markImg.height - 15 * scale, markImg.width, markImg.height)

      // 将canvas转换成blob
      canvas.toBlob(blob => resolve(blob))
    } catch (error) {
      reject(error)
    }

  })
}

function blobToImg(blob) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.addEventListener('load', () => {
      let img = new Image()
      img.src = reader.result
      img.addEventListener('load', () => resolve(img))
    })
    reader.readAsDataURL(blob)
  })
}

export function htmlToCanvas(el, backgroundColor = 'rgba(0,0,0,.1)') {
  return new Promise(async (resolve, reject) => {
    try {
      const markImg = await html2canvas(el, {
        scale: 2,   //此处不使用默认值window.devicePixelRatio,需跟移动端保持一致
        allowTaint: false,   //允许污染
        useCORS: true,
        backgroundColor //'transparent'  //背景色
      })
      resolve(markImg)
    } catch (error) {
      reject(error)
    }
  })
}

/**
 * 压缩和旋转图片
 * @param {blob} file
 * @param {number} quality  压缩比例
 * @param {number} maxWidth
 * @returns {Promise}
 */
export function compressor(file, quality = 0.6, maxWidth = 750) {
  return new Promise(resolve => {
    new Compressor(file, {
      maxWidth,
      quality,
      success: resolve,
      error(err) {
        console.log(err.message)
      }
    })
  })
}

2、项目中使用

<!-- 图片上传 -->
<div class="flex mt20" v-if="item.questionType === 4">
  <van-uploader
    v-model="item.imgUpload"
    multiple="true"
    lazy-load
    :deletable="!isDisabled"
    :disabled="isDisabled"
    @delete="handleDeleteImg({ ...arguments, item })"
    :before-read="handleBeforeImgUpload"
    :after-read="handleAfterImgUpload"
    @click.native="currentItem = item"
  />
</div>

<script>
import {
  getTaskDetail,
  userExecute,
  submitFlow,
  rejectFlow,
} from '@/api/myTask';

import { uploadOSS } from '@/utils/oss';
import { parseTime, addWaterMarker } from '@/utils';

import { ImagePreview } from 'vant';

import Compressor from 'compressorjs';

const fileExtensions = ['xlsx', 'xls', 'docx', 'doc', 'pdf'];

const quality = 0.2; //图片压缩质量

export default {
  methods: {
  // 上传前
   async handleBeforeImgUpload(img, detail) {
      if (!img) {
        return
      }
      return new Promise(async (resolve, reject) => {
        if (Array.isArray(img)) {
          if (img.length > 5) {
            this.$toast('一次最多上传5张,请分批次上传!')
            reject()
          }
          let blobs = []
          for (const file of img) {
            // 大于512k的图片则先压缩
            if (file.size > 512 * 1024 && file.type.includes('image/')) {
              file = await this.compressor(file)
            }
            // 添加水印
            let blob = await addWaterMarker(file)
            blob.name = file.name
            blobs.push(blob)
          }
          resolve(blobs)
        } else {
          // 大于512k的图片则先压缩
          if (img.size > 512 * 1024 && img.type.includes('image/')) {
            img = await this.compressor(img)
          }
          const blob = await addWaterMarker(img)
          blob.name = img.name
          resolve(blob)
        }
      })
    },

    // 上传后
    async handleAfterImgUpload(img, detail) {
      try {
        $loading.show()
        if (Array.isArray(img)) {
          img.forEach(async ({ file }, index) => {
            if (!file.name || !file.type.includes('image/')) {
              this.currentItem.imgUpload.splice(detail.index + index, 1)
              this.$toast('上传失败,只能上传照片!')
              // 上传完成
              if (index === img.length - 1) {
                $loading.hide()
              }
              return //forEach里的return相当于continue
            }
            if (file.size > 1024 * 1024 * 10) {
              this.currentItem.imgUpload.splice(detail.index + index, 1)
              this.$toast('文件太大,单个文件不能超过10M!')
              // 上传完成
              if (index === img.length - 1) {
                $loading.hide()
              }
              return
            }
            try {
              const { fileName, url } = await uploadOSS(file)
              this.currentItem.answer.push({
                url,
              })
            } catch (error) {
              this.currentItem.imgUpload.splice(detail.index + index, 1)
              this.$toast('上传失败,请稍后重试!')
              console.error(error)
            }
            // 上传完成
            if (index === img.length - 1) {
              $loading.hide()
            }
          })
        } else {
          if (!img.file.type.includes('image')) {
            this.currentItem.imgUpload.splice(detail.index, 1)
            $loading.hide()
            this.$toast('上传失败,只能上传照片!')
            return
          }
          if (img.file.size >= 1024 * 1024 * 10) {
            this.currentItem.imgUpload.splice(detail.index, 1)
            $loading.hide()
            this.$toast('文件太大,不能超过10M!')
            return
          }
          // 大于512k则先压缩
          let file = img.file
          const { fileName, url } = await uploadOSS(file)
          this.currentItem.answer.push({
            url,
          })
          $loading.hide()
        }
      } catch (error) {
        this.currentItem.imgUpload.splice(detail.index, 1)
        $loading.hide()
        this.$toast('上传失败,请稍后重试!')
        console.error(error)
      }
    }
 }

感谢龙哥的指导;

3、效果如下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

    面向百度开发 html <van-uploader :after-read="onRead" accept="image/*"> <img src="./icon_input_add.png" /> </van-uploader> js data() { return { files: { name: "", type: "" }, headerImage: null,

  • 使用Vue实现图片上传的三种方式

    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平

  • 基于VUE选择上传图片并页面显示(图片可删除)

    基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="

  • vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

  • vue+elementUI实现图片上传功能

    本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下 1.html <el-form-item label="图片" prop="logo"> <el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="

  • vue.js 图片上传并预览及图片更换功能的实现代码

    这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=

  • vue实现图片上传功能

    本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下 先看效果 图片上传使用vant组件库中的 van-uploader, 使用方法参考官网 vant组件库 下面看代码 UploadPicture.vue <template> <div class="content"> <!-- 底部模块start --> <div class="bottom_bg"> <p class="f

  • vue中使用带隐藏文本信息的图片、图片水印的方法

    一.带隐藏文本信息的图片 通过RGB 分量值的小量变动,不影响对图片的识别.因此,我们可以在图片加入文字信息. 最终达到如下效果: 首先,在该组件中加入img用于显示图片 <canvas ref="canvas" v-show="0"></canvas> <img :src="imageUrl" v-if="imageUrl"/> 调用方法 encryptionImg({ width = '

  • vue实现上传图片添加水印

    本文实例为大家分享了vue上传图片添加水印的具体实现代码,供大家参考,具体内容如下 1.封装添加水印方法 /** * 添加水印 * @param {blob} file * @param {string} el * @returns {Promise} */ export async function addWaterMarker(file, el = '#markImg') { return new Promise(async (resolve, reject) => { try { // 先

  • vue实现上传图片添加水印(升级版)

    vue项目实现上传图片添加水印升级版,供大家参考,具体内容如下 封装水印方法 /** * 添加水印 * @param {blob} file * @param {string} el * @returns {Promise} */ export async function addWaterMarker(file, el = '#markImg') { return new Promise(async (resolve, reject) => { try { // 先压缩和旋转图片 file =

  • ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

    前言 最近工作中遇到一个需求,是要实现asp.net百度ueditor图片上传添加水印的功能,通过查找相关的资料终于实现了,下面来给大家分享下实现的效果,文末给出了实例代码,大家可以参考学习,下面来一起学习学习吧. 效果图 首先来看下我们想要的功能界面,如果发觉这种效果不是你想要的,后面的内容就不用看了. 准备  从官网下载的Ueditor压缩包,我下载的是ueditor1_4_3-utf8-net 这个版本,下面的介绍是对这个版本而言的. 修改界面 先找到我们要添加"加水印[checkbox]

  • Vue实现页面添加水印功能

    创建watermark.js文件 let watermark = {} let setWatermark = (str) => { let id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } //创建一个画布 let can = document.createElement('can

  • vue+vant 上传图片需要注意的地方

    <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" /> 1:上传文件流,提交的模式 肯定得 form-data模式 2:上传的文件file 做出处理我这里做的只能选择一张 afterRead(file){ console.log(file); //控制台可以看见图片信息 if(this.fileList.length >

  • vue实现页面添加水印

    本文实例为大家分享了vue实现页面添加水印的具体代码,供大家参考,具体内容如下 js文件 建一个watermark.js文件 let setWatermark = (str1, str2, str3) => { let id = '1.23452384164.123412415'     if (document.getElementById(id) !== null) {         document.body.removeChild(document.getElementById(id)

  • PHP利用ueditor实现上传图片添加水印

    博客在上传图片的时候,我希望能打上我博客链接的水印,掘金,csdn都是这么干的,这事我得学习. 平时的图片上传还好说,在文章编辑的时候,使用ueditor上传图片加水印需要修改ueditor部分PHP的源码,我这里大概记录一下. 首先打开php文件夹下的Uploader.class.php 找到private function upFile(),这是上传文件的主处理方法, 找到122行: $this->stateInfo = $this->stateMap[0]; 在这个下面加入:$this-

  • vue.js 上传图片实例代码

    最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来. 前端部分 <div class="form-group"> <label>背景图</label> <input type="file" class="form-control" @change="onFileChange"> </div> <d

  • VUE axios上传图片到七牛的实例代码

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交. form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据.但是如果想传输多条form表单数据,需要写很多dom,同时还要写iframe,太麻烦. 目前感觉比较干净的办法就是通过axios的post请求,发送form数据到后台. html部分,至于界

随机推荐