這篇文章主要講解了vue中如何使用帶隱藏文本信息的圖片、圖片水印，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、做網(wǎng)站、邵武網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、邵武網(wǎng)絡(luò)營銷、邵武企業(yè)策劃、邵武品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供邵武建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
一.帶隱藏文本信息的圖片
通過RGB 分量值的小量變動，不影響對圖片的識別。因此，我們可以在圖片加入文字信息。
最終達(dá)到如下效果:
首先，在該組件中加入img用于顯示圖片
調(diào)用方法
重慶分公司
重慶分公司
encryptionImg({
width = '',
height = '',
content = '',
}){
let img = this.img
const imgRatio = img.naturalWidth / img.naturalHeight;
const ctxWidth = width || img.naturalWidth;
const ctxHeight = height || ctxWidth / imgRatio;
this.canvas.width = ctxWidth;
this.canvas.height = ctxHeight;
const ctx = this.ctx;
ctx.font = '16px Microsoft Yahei';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(content, 12, ctxHeight/2, ctxWidth);17 const textData = ctx.getImageData(0, 0, ctxWidth, ctxHeight);
this.imageUrl = this.mergeData(textData.data, 'R',ctxWidth,ctxHeight);19 }把文字和圖片整合成一張圖
mergeData(newData, color, width, height) {
let img = this.img
this.ctx.drawImage(img, 0, 0, width, height);
this.originalData = this.ctx.getImageData(0, 0, width, height);
var oData = this.originalData.data;
var bit, offset;
switch (color) {
case 'R':
bit = 0;
offset = 3;
break;
case 'G':
bit = 1;
offset = 2;
break;
case 'B':
bit = 2;
offset = 1;
break;
}
for (var i = 0; i < oData.length; i++) {
if (i % 4 == bit) {
if (newData[i + offset] === 0 && (oData[i] % 2 === 1)) {
if (oData[i] === 255) {
oData[i]--
} else {
oData[i]++
}
} else if (newData[i + offset] !== 0 && (oData[i] % 2 === 0)) {
if (oData[i] === 255) {
oData[i]--
} else {
oData[i]++
}
}
}
}
this.ctx.putImageData(this.originalData, 0, 0);
return this.canvas.toDataURL();
},調(diào)用下面方法，解開圖片信息
decryptImg(){
var data = this.originalData.data;
for(var i = 0; i < data.length; i++){
if(i % 4 == 0){
if(data[i] % 2 == 0){
data[i] = 0;
} else {
data[i] = 255;
}
} else if(i % 4 == 3){
continue;
} else {
data[i] = 0;
}
}
this.ctx.putImageData(this.originalData, 0, 0);
this.imageUrl = this.canvas.toDataURL();
},二.圖片水印
watermark({
content = '',
container = '',
width = '',
height = '',
position = 'bottom-right',
font = '16px 微軟雅黑',
fillStyle = 'rgba(255, 255, 255, 1)',
zIndex = 11000,
} = {}) {
let img = this.img
const imgRatio = img.naturalWidth / img.naturalHeight;
const ctxWidth = width || img.naturalWidth;
const ctxHeight = height || ctxWidth / imgRatio;
this.canvas.width = ctxWidth;
this.canvas.height = ctxHeight;
const ctx = this.ctx;
ctx.drawImage(img, 0, 0, ctxWidth, ctxHeight);
ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.font = font;
ctx.fillStyle = fillStyle;
if(position == 'center') {
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(content, ctxWidth / 2, ctxHeight / 2, ctxWidth)
}else if(position == 'bottom-right') {
ctx.textAlign = 'right';
ctx.textBaseline = 'alphabetic';
ctx.fillText(content, ctxWidth-12, ctxHeight-12, ctxWidth)
}
const base64Url = this.canvas.toDataURL();
if(container) {
const div = document.createElement('div');
div.setAttribute('style', ` width: ${ctxWidth}px; height: ${ctxHeight}px; z-index: ${zIndex};
pointer-events: none; background-repeat: repeat; background-image: url('${base64Url}')`);
container.insertBefore(div, null);
}
this.imageUrl = base64Url
}看完上述內(nèi)容，是不是對vue中如何使用帶隱藏文本信息的圖片、圖片水印有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
