用 JS 给图片加文字水印或图片水印

1.加文字水印

示例代码：

  function blobToImg(blob) {return new Promise((resolve, reject) => {let reader = new FileReader()reader.addEventListener('load', () => {let img = new Image()img.src = reader.resultimg.addEventListener('load', () => resolve(img))})reader.readAsDataURL(blob)})}function imgToCanvas(img) {let canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightlet ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0)return canvas}function watermark(canvas, text) {return new Promise((resolve, reject) => {let ctx = canvas.getContext('2d')// 设置填充字号和字体，样式ctx.font = "24px 宋体"ctx.fillStyle = "#FFC82C"// 设置右对齐ctx.textAlign = 'right'// 在指定位置绘制文字，这里指定距离右下角20坐标的地方ctx.fillText(text, canvas.width - 20, canvas.height - 20)canvas.toBlob(blob => resolve(blob))})}function imgWatermark(dom, text) {let input = document.createElement('input')input.setAttribute('type', 'file')input.setAttribute('accept', 'image/*')input.onchange = async () => {let img = await blobToImg(input.files[0])let canvas = imgToCanvas(img)let blob = await watermark(canvas, text)let newImage = await blobToImg(blob)dom.appendChild(newImage)}dom.appendChild(input)}let dom = document.querySelector('#container')imgWatermark(dom, '水印文字')

效果：

2.加图片水印

示例代码：

  drawAndShareImage();function drawAndShareImage() {let canvas = document.createElement("canvas");canvas.width = 500;canvas.height = 500;let context = canvas.getContext("2d");context.rect(0 , 0 , canvas.width , canvas.height);context.fillStyle = "#fff";context.fill();let myImage = new Image();myImage.src = "https://img1.baidu.com/it/u=4250523823,184246375&fm=26&fmt=auto&gp=0.jpg";  // 背景图片 你自己本地的图片或者在线图片myImage.crossOrigin = "Anonymous";myImage.onload = function() {context.drawImage(myImage, 0, 0, 500, 500);//     context.font = "60px Courier New";//     context.fillText("我是文字",350,450);let myImage2 = new Image();myImage2.src = "https://img-home.csdnimg.cn/images/20201124032511.png";  // 你自己本地的图片或者在线图片myImage2.crossOrigin = "Anonymous";myImage2.onload = function() {context.drawImage(myImage2 , 175 , 175 , 225 , 225);let base64 = canvas.toDataURL("image/png"); // "image/png" 这里注意一下let img = document.getElementById("avatar");// document.getElementById('avatar').src = base64;img.setAttribute("src", base64);}}}

效果：

实际业务中的代码：

/*** base64 类型转 Blob 类型* @param {base64} base64* @returns {Blob} blob*/base64ToBlob(base64) {let arr = base64.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });},/*** 给图片增加图片水印* @param {File} file 图片* @returns {File} 增加水印后的图片*/async addWatermark(file) {let blob = {};const _URL = window.URL || window.webkitURL;const img = new Image();img.src = _URL.createObjectURL(file);await new Promise(resolve => {img.onload = async () => {const canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;const context = canvas.getContext('2d');context.drawImage(img, 0, 0);// 水印图片const watermarkImg = new Image();watermarkImg.src = require('@/assets/img/watermark.png'); // logoawait new Promise(resolve => {watermarkImg.onload = () => {context.drawImage(watermarkImg, 0, 0);const base64 = canvas.toDataURL('image/png');blob = this.base64ToBlob(base64);resolve();}});resolve();};});return new File([blob], file.name, {type: file.type,});},

用 JS 给图片加文字水印或图片水印相关推荐

html图片加文字批量处理,图片批量加水印工具，图片批量添加文字|图片同时添加文字或图片水印...
一般在网上下载的图片都会自动带有相应网站的文字或是图片水印,虽然可能在使用图片素材的时候,图片上的水印会在一定程度上影响美观,但是水印是对于版权或者是原创的一个保护,图片水印不仅是可以保护别人的原创图 ...
PHP实现给图片加文字水印
PHP实现给图片加文字水印一.开发环境 1.Windows+Apache+MySQL+PHP的环境. 2.文本编辑器:Sublime. 二.主要技术 PHP+HTML+CSS 三.效果图与具体步骤 ...
JAVA - base64图片加文字水印
场景为:前端传入转码后的base64图片字符串,后台加水印并转为图片,再上传使用postman调试接口时,总会出现400bad request的情况若是把图片转码的base64编码放在header ...
ASP.NET(C#)图片加文字、图片水印
ASP.NET(C#)图片加文字.图片水印 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 2 ...
Java图片加文字水印
Java图片加文字水印 import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.I ...
阿里云 OSS 对象存储 OSS 图片加文字水印
阿里云 OSS 对象存储实际开发需先阅读阿里云 [OSS快速入门文档](https://help.aliyun.com/document_detail/31883.html?spm=5176.20 ...
图片加文字（批量水印批量水印大师）
图片加文字(批量水印批量水印大师) 批量水印大师是一款好用的批量添加水印软件.三步操作即可轻松完成. 第一步: 添加图片 - 选择需要添加水印的图片文件. 第二步:水印设置 - 设置水印效果,所见即 ...
iOS修改图片尺寸和裁剪功能以及图片上加图片图片加文字（水印效果）
1.修改图片尺寸 - ( UIImage *)imageWithImageSimple:( UIImage *)image scaledToSize:( CGSize )newSize { ...
给图片加文字，加图片
'''给图片加文字''' from PIL import Image, ImageDraw, ImageFontfile = 'C:\\Users\\14399\\Desktop\\new_1.png ...
PIL实现两张图片合成一张，和图片加文字
PIL实现两张图片合成一张,和图片加文字文章目录: 一.PIL实现两张图片合成一张 1.方法一: 2.方法二二.图片添加文字首先说明一下: (小姐姐是谁,是my sweetheart ,请勿使用 ...

用 JS 给图片加文字水印或图片水印

1.加文字水印

2.加图片水印

用 JS 给图片加文字水印或图片水印相关推荐

最新文章

热门文章