vue中html2canvas给指定区域添加满屏水印
更新时间：2023年11月24日 11:01:19 作者：吃葡萄不吐葡萄皮嘻嘻
本文主要介绍了vue中html2canvas给指定区域添加满屏水印,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
效果图如下：
直接贴上代码
下载插件： npm i html2canvas
<template>
<div ref="imageDom">
<el-button @click="downloadPicture">下载</el-button>
<div>
<el-table
class="tableX"
:height="flag ? '400' : ''"
:data="tableData"
:row-class-name="tableRowClassName"
>
<el-table-column
:fixed="flag ? true : false"
prop="date"
label="日期"
width="180"
>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="age" label="年龄"> </el-table-column>
<el-table-column prop="sex" label="性别"> </el-table-column>
<el-table-column prop="hobby" label="爱好"> </el-table-column>
</el-table>
</div>
</div>
</template>
<script>
//下载插件 npm i html2canvas
import html2canvas from "html2canvas";
export default {
data() {
return {
//模拟数据
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "开始",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海",
age: 30,
sex: "女",
hobby: "爱好",
},
{
date: "2016-05-03",
name: "王小虎",
address: "结尾",
},
],
h: 400,
flag: true,
wmConfig: {
font: "microsoft yahei", //字体
textArray: ["xixi", "嘻嘻😁"], //水印文本内容，允许数组最大长度3 即：3行水印
density: 4, //密度 建议取值范围1-5 值越大，水印越多，可能会导致水印重叠等问题，请慎重！！！
},
};
},
mounted() {
},
methods: {
tableRowClassName({ rowIndex }) {
if (rowIndex % 2 === 0) {
return "warning-row";
} else if (rowIndex % 2 !== 0) {
return "success-row";
}
return "";
},
//截图
downloadPicture() {
this.flag = false;
this.$nextTick(() => {
var width = this.$refs.imageDom.style.width;
var cloneDom = this.$refs.imageDom.cloneNode(true);
cloneDom.style.position = "absolute";
cloneDom.style.top = "0px";
cloneDom.style.zIndex = "-1";
cloneDom.style.width = width;
console.log(cloneDom);
document.body.appendChild(cloneDom);
html2canvas(cloneDom).then(async(canvas) => {
// 转成图片，生成图片地址
var imgUrl = canvas.toDataURL("image/png");
let resultBase64 = await this.base64AddWaterMaker(imgUrl, this.wmConfig);
console.log(resultBase64);
imgUrl = resultBase64;
var eleLink = document.createElement("a");
eleLink.href = imgUrl; // 转换后的图片地址
eleLink.download = "pictureName";
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
});
cloneDom.style.display = "none";
this.flag = true;
});
},
//画布添加水印
drawWaterMark(ctx, imgWidth, imgHeight, wmConfig) {
let fontSize;
if (imgWidth >= 3456) {
fontSize = 50;
} else if (imgWidth >= 2700) {
fontSize = 30;
} else if (imgWidth >= 2000) {
fontSize = 26;
} else if (imgWidth >= 1436) {
fontSize = 20;
} else if (imgWidth >= 800) {
fontSize = 12;
} else if (imgWidth >= 500) {
fontSize = 10;
} else {
fontSize = 8;
}
console.log(imgWidth, imgHeight, fontSize);
ctx.font = `${fontSize}px ${wmConfig.font}`;
ctx.lineWidth = 1;
ctx.fillStyle = "rgba(0,0,0,0.5)"; //根据页面的背景色来设置水印颜色
ctx.textAlign = "left";
ctx.textBaseline = "middle";
//文字坐标
const maxPx = Math.max(imgWidth, imgHeight);
const stepPx = Math.floor(maxPx / wmConfig.density);
let arrayX = [0]; //初始水印位置 canvas坐标 0 0 点
while (arrayX[arrayX.length - 1] < maxPx / 2) {
arrayX.push(arrayX[arrayX.length - 1] + stepPx);
}
arrayX.push(
...arrayX.slice(1, arrayX.length).map((el) => {
return -el;
})
);
console.log(arrayX);
for (let i = 0; i < arrayX.length; i++) {
for (let j = 0; j < arrayX.length; j++) {
ctx.save();
ctx.translate(imgWidth / 2, imgHeight / 2); ///画布旋转原点 移到 图片中心
ctx.rotate(-Math.PI / 5);
if (wmConfig.textArray.length > 3) {
wmConfig.textArray = wmConfig.textArray.slice(0, 3);
}
wmConfig.textArray.forEach((el, index) => {
let offsetY = fontSize * index + 2;
ctx.fillText(el, arrayX[i], arrayX[j] + offsetY);
});
ctx.restore();
}
}
},
//给base64图片添加水印
base64AddWaterMaker(base64Img, wmConfig) {
if (wmConfig.textArray.length === 0) {
console.error("****没有水印内容*****");
return base64Img;
}
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
let resultBase64 = null;
img.onload = ()=> {
canvas.width = img.width;
canvas.height = img.height;
console.log(img.width,img.height);
//canvas绘制图片，0 0 为左上角坐标原点
ctx.drawImage(img, 0, 0);
//写入水印
this.drawWaterMark(ctx, img.width, img.height, this.wmConfig);
resultBase64 = canvas.toDataURL("image/png");
console.log(resultBase64);
if (!resultBase64) {
reject();
} else {
resolve(resultBase64);
}
};
img.src = base64Img;
});
},
},
};
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
到此这篇关于vue中html2canvas给指定区域添加满屏水印的文章就介绍到这了,更多相关vue html2canvas水印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,这篇文章主要给大家介绍了关于如何使用elementUI组件实现表格的分页及搜索功能的相关资料,需要的朋友可以参考下2023-03-03
Pinia 是一个基于 Vue 3 的状态管理库，可以更好地支持 TypeScript 和更灵活的状态管理方式，本文主要介绍了pinia的使用与持久化处理，需要的可以参考一下2023-07-07
这篇文章主要介绍了vue项目中如何添加枚举，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在 Vue3 项目中，有时候会出现图片视频加载缓慢、首屏加载白屏的问题，所以本文小编就给大家详细介绍一下如何解决图片视频加载缓慢/首屏加载白屏的问题,需要的朋友可以参考下2023-07-07
vue3 组件与API直接使用的方法详解(无需import)
这篇文章主要介绍了vue3 组件与API直接使用的方法(无需import)，主要包括vue3自动导入和API的自动引入问题，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
这篇文章主要给大家介绍的是vue2 vue3中使用Echarts的相关资料，下面文章 会详细介绍该内容，感兴趣的小伙伴不要错过哟2021-09-09
最近我开发的公司的竞赛网站被发现在IE11下排行榜无数据，但是在其他浏览器没问题，我然后打开控制台一看，发现有问题，纠结了半天才捣腾好，下面小编把方案分享处理，供大家选择2019-07-07
本篇文章主要介绍了vue之数据交互实例代码，vue中也存在像ajax和jsonp的数据交互，实现向服务器获取数据，有兴趣的可以了解一下2017-06-06
这篇文章主要介绍了Vue3如何在SCSS中使用v-bind,通过template先创建一个通用的页面结构,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了vue同个按钮控制展开和折叠同个事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论