vue项目图片列表预览及图片增加水印

63 阅读 0 评论 42 点赞

我是靠谱客的博主激情魔镜，最近开发中收集的这篇文章主要介绍vue项目图片列表预览及图片增加水印，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

有一个列表详情页面,里面有图片,之前是点击图片进行预览
现在实现点击图片进行预览并加上水印效果

图片预览用的是vue的v-viewer插件
添加水印用的canvas添加水印

思路:一个列表详情可能有多张图片,列表返回的图片是服务器地址图片
利用canvas添加水印,第一步是把服务器地址图片转为base64图片,第二步是把base64图片进行canvas水印处理
第三步是把处理完的水印图片放到要预览的数组中

错误思路:第一次想的是点击预览的时候,拿到所有图片,然后把所有图片转为base64处理一下,在做水印处理,有个弊端,就是页面中
如果5个图片,每次点击一次图片,都会把所有的图片处理下,每次会触发5次,这样点了5个会触发25次.
正确思路:第二次这么处理,拿到列表的时候,就先把所有图片base64处理一下,做水印处理,放在另外一个数组B中,然后预览的时候取这个B数组已经处理过的水印图片,这样只需处理5次即可.

//previewList图片数组列表
//previewShowList处理完的加水印的canvas图片列表 给预览用的
this.previewList.forEach((item) => {
this.getBase64Image(item);
}),
getBase64Image(imgUrl) {
const that = this;
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
var blob = this.response;
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
// 此处拿到的已经是 base64的图片了
let base64 = e.target.result;
this.run(base64)
};
oFileReader.readAsDataURL(blob);
}
}
xhr.send();
},
// 运行示例
run(imgUrl) {
// 1.图片路径转成canvas
const tempCanvas = await this.imgToCanvas(imgUrl);
// 2.canvas添加水印
const markText = '我是水印'
const canvas = this.addWatermark(tempCanvas, markText);
// 3.canvas转成img
const img = this.convasToImg(canvas);
// 查看效果
this.previewShowList.push(img.src);
},
// 添加水印
async imgToCanvas(url) {
// 创建img元素
const img = document.createElement("img");
img.src = url;
img.setAttribute("crossOrigin", "anonymous"); // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
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;
},
/**
* canvas添加水印
* @param {canvas对象} canvas
* @param {水印文字} text
*/
addWatermark(canvas, text) {
const ctx = canvas.getContext("2d");
ctx.rotate(50 * Math.PI / 180) // 水印旋转角度
ctx.font = '15px Vedana'
ctx.fillStyle = '#ccc'
ctx.textAlign = 'center'
ctx.textBaseline = 'Middle'
let forIndex = canvas.width / 100 | 0
for(let i = -10; i < 10; i++) {
for(let j = -10; j < forIndex; j++) {
ctx.fillText(text, 300 * j, 150 * i + 75)
}
}
return canvas;
},
/**
* canvas转成img
* @param {canvas对象} canvas
*/
convasToImg(canvas) {
// 新建Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
},