首页 > 其他分享 >Vue 图片上传添加水印文字/水印图片

Vue 图片上传添加水印文字/水印图片

时间:2024-03-09 21:25:19浏览次数:23  
标签:canvas Vue img base64 ctx 水印 let 图片

图片上传之前的处理(添加水印);可以是上传图片到后台也可以是到OSS 原理都是一样

beforeUpload(file) {
                return new Promise((resolve, reject) => {
                    // 1.调用方法1: 把文件转换为base64字符串
                    fileByBase64(file, async (base64) => {   
                        // 2. 调用方法2:把base64转换为Canvas
                        let tempCanvas = await this.imgToCanvas(base64)
                        //3.调用方法3: 写入水印到Canvas
                        const canvas = this.addWatermark(tempCanvas, '看看账号网');
                        //4. 调用方法4:把Canvas转换为image文件
                        const img = this.convasToImg(canvas) 
                        //5.调用方法5:被image转换为File文件(第二个参数为文件名)
                        let newFile = base64ToFile(img.src, file.name) 
                        resolve(newFile)
                    })
                })
            },

  

方法一:File文件转换为Base64字符串(until)

/**
 * 文件转base64
 * @param  file 文件流
 * @param  callback 回调函数
 */
export function fileByBase64(file, callback) {
  let reader = new FileReader();
  // 传入一个参数对象即可得到基于该参数对象的文本内容
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    // target.result 该属性表示目标对象的DataURL
    callback(e.target.result)
  };
}

方法2:Base64转Canvas-使用页面中

 /**
             * Base64转成canvas
             * @param  base64
             */
            async imgToCanvas(base64) {
                // 创建img元素
                const img = document.createElement('img')
                img.setAttribute('src', base64)
                await new Promise((resolve) => (img.onload = resolve))
                // 创建canvas DOM元素,并设置其宽高和图片一样
                const canvas = document.createElement('canvas')
                canvas.width = img.width
                canvas.height = img.height
                // 坐标(0,0) 表示从此处开始绘制,相当于偏移。
                canvas.getContext('2d').drawImage(img, 0, 0)

                return canvas
            },

方法3:添加水印

/**
             * canvas添加水印
             * @param  canvas 对象
             * @param text 水印文字
             */
            addWatermark(canvas, text) {
                const ctx = canvas.getContext('2d')
                // 给上传的图片添加-水印图片
                ctx.drawImage(this.$refs.waterImg, 0, 0)

                // 一下是给图添加  水印文字的方法
                // 设置字体大小和字体
                // ctx.font = '20px Arial'; 
                // ctx.rotate(-0.4);// 设置文字旋转角度
                // 创建实心水印
                // ctx.strokeStyle = 'rgba(0,0,0,.8)';
                // ctx.fillText(text, (canvas.width)*(0.1), (canvas.height)*(0.1))
                // ctx.fillText(text, canvas.width / 2, canvas.height / 2)
                // 创建虚心水印
                // ctx.strokeStyle = 'rgba(0,0,0,.8)';
                // ctx.strokeText(text, (canvas.width)*(0.1), (canvas.height)*(0.15));
                // ctx.strokeText(text, (canvas.width)*(0.1), (canvas.height)*(0.45));
                // ctx.strokeText(text, canvas.width / 2, canvas.height / 2)
                return canvas
            },

其中添加水印图片的话,用drawimg 但是一定要注意 img 的属性,这里用的是本地图片

<img ref="waterImg" src="../../../static/water_pc.png" crossorigin="Anonymous" />

方法4:Canvas转图片文件(Image

 /**
     * canvas转成img
     * @param {canvas对象} canvas
     */
    convasToImg(canvas) {
      // 新建Image对象,可以理解为DOM
      let image = new Image()
      // canvas.toDataURL 返回的是一串Base64编码的URL
      // 指定格式 PNG
      image.src = canvas.toDataURL('image/png')
      return image
    },

方法5:图片文件(Image)转文件(File)-until

/**
 * 
 * @param urlData  base64
 * @param fileName 文件名称
 * @returns {File}
 */
export function base64ToFile (urlData, fileName){
  let arr = urlData.split(',');
  let mime = arr[0].match(/:(.*?);/)[1];
  let bytes = atob(arr[1]); // 解码base64
  let n = bytes.length
  let ia = new Uint8Array(n);
  while (n--) {
    ia[n] = bytes.charCodeAt(n);
  }
  return new File([ia], fileName, { type: mime });
}

 

标签:canvas,Vue,img,base64,ctx,水印,let,图片
From: https://www.cnblogs.com/haonanZhang/p/18063324

相关文章

  • 【前端Vue】Vue从0基础完整教程第1篇:vue基本概念,vue-cli的使用【附代码文档】
    Vue从0基础到大神学习完整教程完整教程(附代码资料)主要内容讲述:vue基本概念,vue-cli的使用,vue的插值表达式,{{gaga}},{{if(obj.age>18){}}},vue指令,综合案例-文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,vue通......
  • vue2接入paypal支付
     paypal支付,官网实例引入cdn在加载该组件时就读取脚本data(){return{clientId:'AbJmdo6IqMHBMfgJVP-qWfFacVBBDOE45hOJGp8_XpZ1uq4ytOzOPDX4jw2p0pUTPmNptRA40BEqgdXf',//paypal客户端id};},mounted(){this.initScript()},methods:{......
  • Vue — 生命周期
    一、Vue的生命周期和生命周期的四个阶段1、生命周期一个Vue实例从创建到销毁的过程。2.生命周期的四个阶段(1)创建:做一些初始化操作,Vue将普通数据转化为响应式数据;(2)挂载:渲染模板,结合对应的数据渲染到视图,看到页面的渲染完成则可以认为已经完成了(1)(2)两个阶段;(3)更新:数据修改,视图......
  • Vue — 监听器(watch)使用
    在Vue.js中,watch选项用于监视数据的变化,并在数据变化时执行相应的操作。watch可以监视一个或多个数据的变化,当被监视的数据发生变化时,可以触发预定义的回调函数。一、简单写法<textareaname=""id=""cols="30"rows="10"v-model="word"></textarea>watch:{......
  • word 创建宏,根据选取的图片相同的图片
    SubDeleteImages()   DimiAsLong   DimSourceWidthAsSingle   DimSourceHeightAsSingle   DimDeleteCounterAsLong     'Checkifapictureisselected   IfSelection.InlineShapes.Count>0Then     'Save......
  • Vue — 计算属性(computed)详解
    Vue.js中的计算属性是基于它的响应式系统来实现的,它可以根据Vue实例的数据状态来动态计算出新的属性值。在Vue组件中,计算属性常用于对数据进行处理和转换,以及动态生成一些需要的数据。一、使用方式1.定义计算属性: 在Vue组件中,通过在 computed 对象中定义计算属性名称及......
  • 好细的Vue安装与配置
    一、下载和安装Vue官网下载地址Download|Node.js 选择适合自己的版本,推荐LTS,长久稳定版本。 我这里选择的是WindowsInstaller(.msi)64-bit下载好后,双击下载的安装包。 点next  勾选Iaccept............,点next   这里建议更改为自己想要的的安装目录,......
  • 前端保存图片
    importReact,{useRef}from'react';importhtml2canvasfrom'html2canvas';constDownloadImage=()=>{constelementRef=useRef(null);consthandleDownload=()=>{constelement=elementRef.current;html2c......
  • 【vue3】学习对store中数据的使用
    src/store/modules/nav.jsimport{defineStore}from'pinia';import{handleTree}from'@/utils/ruoyi'import{list}from"@/api/nav/node";conststore=defineStore( 'nav', { state:()=>({ nodeList:[]......
  • 【前端Vue】社交信息头条项目完整笔记第1篇:一、项目初始化【附代码文档】
    社交媒体-信息头条项目完整开发笔记完整教程(附代码资料)主要内容讲述:一、项目初始化使用VueCLI创建项目,加入Git版本管理,调整初始目录结构,导入图标素材。二、登录注册准备,实现基本登录功能,登录状态提示,表单验证。三、个人中心,四、首页—文章列表TabBar处理,页面布局,处......