vue中html2canvas給指定區(qū)域添加滿屏水印
更新時間：2023年11月24日 11:01:19 作者：吃葡萄不吐葡萄皮嘻嘻
本文主要介紹了vue中html2canvas給指定區(qū)域添加滿屏水印,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
效果圖如下：
直接貼上代碼
下載插件： 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 {
//模擬數(shù)據(jù)
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: "結(jié)尾",
},
],
h: 400,
flag: true,
wmConfig: {
font: "microsoft yahei", //字體
textArray: ["xixi", "嘻嘻??"], //水印文本內(nèi)容，允許數(shù)組最大長度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) => {
// 轉(zhuǎn)成圖片，生成圖片地址
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; // 轉(zhuǎn)換后的圖片地址
eleLink.download = "pictureName";
// 觸發(fā)點擊
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)"; //根據(jù)頁面的背景色來設(shè)置水印顏色
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); ///畫布旋轉(zhuǎn)原點 移到 圖片中心
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("****沒有水印內(nèi)容*****");
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>
到此這篇關(guān)于vue中html2canvas給指定區(qū)域添加滿屏水印的文章就介紹到這了,更多相關(guān)vue html2canvas水印內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3.0實現(xiàn)插件封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
文章詳細介紹了HTML5 Canvas的模板區(qū)、樣式區(qū)和腳本區(qū)的使用方法,包括如何設(shè)置Canvas的寬高、水平居中、獲取Canvas元素、繪制圖形（直線、矩形、圓、文字）、轉(zhuǎn)換為Base64、下載圖片以及加載圖片并添加文字水印等操作2025-10-10
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了vue3封裝Element導航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導航收縮的詳細代碼,本文通過實例代碼介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
vue點擊彈窗自動觸發(fā)點擊事件的解決辦法(模擬場景)
本文通過案例場景給大家介紹vue點擊彈窗自動觸發(fā)點擊事件的解決辦法，通過兩種方法給大家分享vue 自動觸發(fā)點擊事件的處理方法，對vue自動觸發(fā)點擊事件相關(guān)知識感興趣的朋友一起看看吧2021-05-05
淺談vue中改elementUI默認樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認樣式引發(fā)的static 與assets的區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue中的循環(huán)遍歷對象、數(shù)組和字符串，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)開關(guān)按鈕拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
本文給大家分享的是個人在使用vue.js制作的文章和評論的分頁組件，并使用webpack打包起來，這里推薦給大家，有需要的小伙伴可以參考下2016-06-06
在實際的項目開發(fā)中,使用svg圖標占用內(nèi)存比圖片更小,映入圖片內(nèi)存比較大,同時也適用于不同屏幕的尺寸,下面這篇文章主要給大家介紹了關(guān)于vue項目引入svg圖標的完整步驟,需要的朋友可以參考下2022-10-10