VUE 图片上加文字水印

我这里用的是uniapp上传方法

上传的方法

uni.chooseImage({count: 6, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: (res) => {// console.log(res);this.base64AddWaterMaker(res.tempFiles[0].path, this.waterMakeConfig).then((res) => {console.log("res", res);this.img=res});}});

         //处理水印的方法base64AddWaterMaker(base64Img, waterMakeConfig) {// 保留this指向 后面会用到的let _this = this;return new Promise((resolve, reject) => {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');const img = new Image();img.crossOrigin = 'Anonymous'; // 图片加载的过程中允许出现跨域// 先有src属性才会触发 onload函数img.src = base64Img;// 异步加载img.onload = function() {// 注意img.onload方法是异步的canvas.width = img.width;canvas.height = img.height;ctx.font = `40px Georgia`;// 给文字添加颜色// ctx.fillStyle = 'red';// 添加渐变颜色的水印var gradient = ctx.createLinearGradient(0, 0, 200, 0);gradient.addColorStop(0, 'blue');gradient.addColorStop(1, 'red');ctx.fillStyle = gradient;// 以左上角为坐标原点 开始绘制图像ctx.drawImage(img, 0, 0, img.width, img.height);ctx.fillText(waterMakeConfig.textArray[0], img.width * 0.05, img.height *0.8); //在图片上添加字体ctx.fillText(waterMakeConfig.textArray[1], img.width * 0.05, img.height * 0.85);let resultBase64 = canvas.toDataURL('image/png'); // 返回的图片文件也是base64格式的if (!resultBase64) {reject();} else {_this.imgBase64 = resultBase64;resolve(resultBase64);}};});},水印样式waterMakeConfig: {font: 'microsoft yahei', //字体textArray: ['风-温迪', '2022/9/1 10:13'],},

最终效果

VUE 图片上加文字水印相关推荐

jsp text 水印_java实现图片上加文字水印（SpringMVC + Jsp）
看之前要先对SpringMVC进行了解打好基础,下面直接先看效果图代码编写 1.导入相关架包 2.配置文件 web.xml watermarkspringmvc dispatcherServlet ...
不用PS，如何给多图片批量加文字水印？
给图片加上文字水印是我们在工作中经常遇到的事情,比如将图片上传到网站上,为了防止别人盗用自己的图片,我们都习惯在图片上加上水印,文字水印或者图片水印,我就经常在工作中需要给图片加水印. 一个图片加上文 ...
PHP 合成图片并在图片上加文字
/*** Info: PHP把一张图片作为背景和另一张图片合成新图片*/public function createImage(){$path_1 = 'XXXXX/attachment/images ...
php 图片上加文字,php使用GD库实现图片上添加文字的方法（代码）
本篇文章给大家带来的内容是关于php使用GD库实现图片上添加文字的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 我们可以利用php的gd库扩展来对我们的图片进行处理,例 ...
Python 给图片上加文字
import PIL from PIL import ImageFont import PIL from PIL import ImageFont from PIL import Image from ...
Java实现在图片上添加文字(水印)
今天分享一个:通过Java代码,给图片添加文字. 比如下面这个图片,我们在左下角就添加了一个文字版的水印,那么这是如何实现的呢 ? 目录 [1]获取原图片对象 (1.1)读取本地图片 (1.2)读取网 ...
python怎么画简单图片-初学Python-简单的在图片上加文字
场景在用户运营中,拉新是第一步.我们产品打算先再小范围试验一下效果,不动用开发哥哥,自己制作邀请海报. 没错,就是最简单的,邀请领奖励活动. UI妹妹把海报模版做出来,邀请码根据用户ID自行填上. ...
html怎么在图片上加文字_怎么把图片文字转换成word文档
我们在和别人交流的时候,有时候为了方便对方查看和理解,我们会使用文字图片进行交流,这是一种非常方便交流的形式.那如果我们想要将图片里的文字转换成Word文档应该怎么操作? 如果我们想要将图片识别为Wo ...
python写文字方法_初学Python-简单的在图片上加文字
场景在用户运营中,拉新是第一步.我们产品打算先再小范围试验一下效果,不动用开发哥哥,自己制作邀请海报. 没错,就是最简单的,邀请领奖励活动. UI妹妹把海报模版做出来,邀请码根据用户ID自行填上. ...

VUE 图片上加文字水印

我这里用的是uniapp上传方法

VUE 图片上加文字水印相关推荐

最新文章

热门文章