电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

vue中使用帶隱藏文本信息的圖片、圖片水印的方法

瀏覽:41日期:2023-01-24 18:26:38

一.帶隱藏文本信息的圖片

通過(guò)RGB 分量值的小量變動(dòng),不影響對(duì)圖片的識(shí)別。因此,我們可以在圖片加入文字信息。

最終達(dá)到如下效果:

vue中使用帶隱藏文本信息的圖片、圖片水印的方法

首先,在該組件中加入img用于顯示圖片

<canvas ref='canvas' v-show='0'></canvas><img :src='http://www.hdgsjgj.cn/bcjs/imageUrl' v-if='imageUrl'/>

調(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 }

參考

http://www.alloyteam.com/2016/03/image-steganography/

到此這篇關(guān)于vue中使用帶隱藏文本信息的圖片、圖片水印的文章就介紹到這了,更多相關(guān)vue 隱藏文本信息圖片水印內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 防水套管厂家_刚性防水套管_柔性防水套管_不锈钢防水套管-郑州中泰管道 | 北京网站建设公司_北京网站制作公司_北京网站设计公司-北京爱品特网站建站公司 | 517瓜水果特产网|一个专注特产好物的网站| 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | 橡胶膜片,夹布膜片,橡胶隔膜密封,泵阀设备密封膜片-衡水汉丰橡塑科技公司网站 | 亮化工程,亮化设计,城市亮化工程,亮化资质合作,长沙亮化照明,杰奥思【官网】 | 干法制粒机_智能干法制粒机_张家港市开创机械制造有限公司 | 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 超声波焊接机_超音波熔接机_超声波塑焊机十大品牌_塑料超声波焊接设备厂家 | UV-1800紫外光度计-紫外可见光度计厂家-翱艺仪器(上海)有限公司 | 艺术涂料_进口艺术涂料_艺术涂料加盟_艺术涂料十大品牌 -英国蒙太奇艺术涂料 | 江苏齐宝进出口贸易有限公司 | 雷蒙磨,雷蒙磨粉机,雷蒙磨机 - 巩义市大峪沟高峰机械厂 | 联系我们-腾龙公司上分客服微信19116098882 | 天津电机维修|水泵维修-天津晟佳机电设备有限公司 | 大_小鼠elisa试剂盒-植物_人Elisa试剂盒-PCR荧光定量试剂盒-上海一研生物科技有限公司 | 不锈钢管件(不锈钢弯头,不锈钢三通,不锈钢大小头),不锈钢法兰「厂家」-浙江志通管阀 | 抓斗式清污机|螺杆式|卷扬式启闭机|底轴驱动钢坝|污水处理闸门-方源水利机械 | 气密性检测仪_气密性检测设备_防水测试仪_密封测试仪-岳信仪器 | 探伤仪,漆膜厚度测试仪,轮胎花纹深度尺厂家-淄博创宇电子 | 企业微信scrm管理系统_客户关系管理平台_私域流量运营工具_CRM、ERP、OA软件-腾辉网络 | 便携式XPDM露点仪-在线式防爆露点仪-增强型烟气分析仪-约克仪器 冰雕-冰雪世界-大型冰雕展制作公司-赛北冰雕官网 | 断桥铝破碎机_铝合金破碎机_废铁金属破碎机-河南鑫世昌机械制造有限公司 | Honsberg流量计-Greisinger真空表-气压计-上海欧臻机电设备有限公司 | 517瓜水果特产网|一个专注特产好物的网站| 乐泰胶水_loctite_乐泰胶_汉高乐泰授权(中国)总代理-鑫华良供应链 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 洗地机_全自动洗地机_手推式洗地机【上海滢皓环保】 | 悬浮拼装地板_幼儿园_篮球场_悬浮拼接地板-山东悬浮拼装地板厂家 | 真空包装机-诸城市坤泰食品机械有限公司 | 机构创新组合设计实验台_液压实验台_气动实训台-戴育教仪厂 | 天津市能谱科技有限公司-专业的红外光谱仪_红外测油仪_紫外测油仪_红外制样附件_傅里叶红外光谱技术生产服务厂商 | PVC地板|PVC塑胶地板|PVC地板厂家|地板胶|防静电地板-无锡腾方装饰材料有限公司-咨询热线:4008-798-128 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 网站建设,北京网站建设,北京网站建设公司,网站系统开发,北京网站制作公司,响应式网站,做网站公司,海淀做网站,朝阳做网站,昌平做网站,建站公司 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 | 防爆大气采样器-防爆粉尘采样器-金属粉尘及其化合物采样器-首页|盐城银河科技有限公司 | 密集柜_档案密集柜_智能密集架_密集柜厂家_密集架价格-智英伟业 密集架-密集柜厂家-智能档案密集架-自动选层柜订做-河北风顺金属制品有限公司 | 冷藏车厂家|冷藏车价格|小型冷藏车|散装饲料车厂家|程力专用汽车股份有限公司销售十二分公司 | 安徽控制器-合肥船用空调控制器-合肥家电控制器-合肥迅驰电子厂 安徽净化板_合肥岩棉板厂家_玻镁板厂家_安徽科艺美洁净科技有限公司 | 剪刃_纵剪机刀片_分条机刀片-南京雷德机械有限公司 |