显性水印和不可见数字水印

2023-10-30 04:40
文章标签 水印 数字水印 显性

本文主要是介绍显性水印和不可见数字水印，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

显性水印和不可见数字水印

显性水印(代码见最后)

  1. 获取要绘制的画布所在元素

  2. 获取浏览器的dpr(devicePixelRatio),将画布的宽度和高度乘以dpr, 否则绘制出来的画布会变得模糊

  3. 创建Image元素开始绘制原始图片

  4. 绘制显性水印, 设置水印的样式, 水印位置设置在图片右下角

不可见数字水印
function getBitOffset(color):

获取RGB中某一分量对应的位和偏移量

图片编码
function encodeImg(src):

  1. 获取画布元素的Context

  2. 画布宽高乘以dpr(devicePixelRatio)

  3. 绘制水印, 使用getImageData()方法获得水印的像素信息

  4. 绘制图片, 使用getImageData()方法获得图片的像素信息

  5. 调用mergeData()方法合并像素信息

function mergeData(ctx, newData, color, originalData):

​ 1. 合并原始图片数据和数字水印的rgb数据.

​ 2. 对于规定的某一个RGB分量,

​ 采用将把没有水印信息的像素通过自增方式全改成偶数,

​ 把有水印信息的像素自增全改成奇数这种编码的方式编码图片

  1. 绘制合并后的图片
图片解码
function decodeImg(src,color):
  1. 同encodeImg()方法一样, 使用getImageData()方法获得图片的RGB信息
  2. 调用processData()方法
function processData(ctx, originalData,color):
  1. 解码的方式与编码的方式相反
  2. 将非指定的RGB分量的所有信息置0(像素点置黑)
  3. 对于指定的RGB分量, 将偶数部分(非水印信息)的信息置0, 其他信息置为255
  4. 对于alpha通道的信息不处理
结果如图

显性水印和不可见数字

代码

未解决跨域问题, 不可从外部直接打开html, 需从IDE打开

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>watermark</title></head>
<style>html{margin:0;padding: 0;}.app{display: flex;justify-content: space-around;flex-wrap: wrap;}.canvas{height: 200px;width: 540px;margin-top: 50px;}img{height: 200px;width: 540px;margin-top: 50px;}</style>
<body>
<div class="app"><img src="../images/1.jpg"><canvas class="canvas" id="canvas-mark"></canvas><canvas class="canvas" id="encode-mark"></canvas><canvas class="canvas" id="encode-image"></canvas></div>
<script>//绘制显性水印var canvas_mark=document.getElementById("canvas-mark")var dpr = (scale = window.devicePixelRatio || 1);var rect = canvas_mark.getBoundingClientRect();canvas_mark.width = rect.width * dpr;canvas_mark.height = rect.height * dpr;canvas_mark.style.width = rect.width + "px";canvas_mark.style.height = rect.height + "px";let ctx=canvas_mark.getContext('2d');let img = new Image();img.onload = function () {ctx.drawImage(img, 0, 0, canvas_mark.width, canvas_mark.height);const txt = '@ ChenYin';ctx.fillStyle = '#fff';ctx.globalAlpha = 1;ctx.font = `12px 微软雅黑 light`;ctx.textAlign = 'right';ctx.fillText(txt, canvas_mark.width - 10, canvas_mark.height - 10);}img.src="../images/1.jpg"//绘制数字水印和数字水印结果图//获取RGB中某一分量对应的位和偏移量function getBitOffset(color) {let 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;}return [bit,offset];}//图片编码//合并原始图片数据和数字水印的rgb数据, 采用将把没有信息的像素全改成偶数, 把有信息的像素全改成奇数这种编码的方式function mergeData(ctx, newData, color, originalData) {let oData = originalData.data;let [bit,offset]=getBitOffset(color);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)) {// // 有信息的像素，该通道最低位置1，可以想想上面的斑点效果是怎么实现的oData[i]++;}}}ctx.putImageData(originalData, 0, 0);}function encodeImg(src) {var textData;var can=document.getElementById('encode-mark');var dpr = (scale = window.devicePixelRatio || 1);var rect = canvas_mark.getBoundingClientRect();can.width = rect.width * dpr;can.height = rect.height * dpr;can.style.width = rect.width + "px";can.style.height = rect.height + "px";var ctx = can.getContext('2d');ctx.font = '30px Microsoft Yahei';ctx.fillText('ChenYin', 200, 120);textData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;var img = new Image();// img.crossOrigin = '';var originalData;img.onload = function () {// 获取指定区域的canvas像素信息ctx.drawImage(img, 0, 0,can.width,can.height);originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);mergeData(ctx, textData, 'G', originalData)};img.src = src;}//图片解码function processData(ctx, originalData,color) {let data = originalData.data;let [bit,offset]=getBitOffset(color);for (var i = 0; i < data.length; i++) {if (i % 4 == bit) {if (data[i] % 2 == 0) {data[i] = 0;} else {data[i] = 255;}} else if (i % 4 == 3) {continue;//alpha通道不处理} else {data[i] = 0;}}// 将结果绘制到画布ctx.putImageData(originalData, 0, 0);}function decodeImg(src,color) {var encode_image = document.getElementById('encode-image')var dpr = (scale = window.devicePixelRatio || 1);var rect = canvas_mark.getBoundingClientRect();encode_image.width = rect.width * dpr;encode_image.height = rect.height * dpr;encode_image.style.width = rect.width + "px";encode_image.style.height = rect.height + "px";var ctx=encode_image.getContext('2d');var img = new Image();var originalData;img.onload = function () {// 获取指定区域的canvas像素信息ctx.drawImage(img, 0, 0);originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);console.log(originalData)processData(ctx, originalData,color)};img.src = src;}encodeImg('../images/1.jpg');decodeImg('../images/1-encode.png','G');</script>
</body></html>

这篇关于显性水印和不可见数字水印的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/305652。

相关文章

2024 年高教社杯全国大学生数学建模竞赛 C 题 农作物的种植策略 参考论文 无水印

2024 年高教社杯全国大学生数学建模竞赛 C 题 农作物的种植策略 参考论文 无水印

持续更新中，2024年数学建模比赛思路代码论文都会发布到专栏内，只需订阅一次！  完整论文+代码+数据结果链接在文末！  订阅后可查看参考论文文件 第一问 1.1 问题重述 这个问题围绕的是华北山区的某乡村，在有限的耕地条件下，如何制定最优的农作物种植策略。乡村有 34 块露天耕地和 20 个大棚，种植条件包括粮食作物、蔬菜、水稻和食用菌。除了要考虑地块的面积、种植季节等，还要确保
阅读更多...
使用 Java 为图片添加各种样式的水印

使用 Java 为图片添加各种样式的水印

在互联网时代，图像的版权保护变得越来越重要。水印作为一种常见的图像保护手段，可以有效防止未经授权的复制和使用。在本文中，我们将详细探讨如何在 Java 中为图片添加各种样式的水印，包括文本水印、图像水印、平铺水印等。通过这一系列的示例和代码实现，您将掌握如何利用 Java 来创建和应用水印，为您的图片增添一层保护。 1. 简介 水印是一种覆盖在图像表面上的标识，通常以文字或图像的形式存在。其主
阅读更多...
Flink事件时间、水印和迟到数据处理

Flink事件时间、水印和迟到数据处理

事件时间与水印 所谓事件时间，就是Flink DataStream中的数据元素自身带有的、在其实际发生时记录的时间戳，具有业务含义，并与系统时间独立。很显然，由于外部系统产生的数据往往不能及时、按序到达Flink系统，所以事件时间比处理时间有更强的不可预测性。为了能够准确地表达事件时间的处理进度，就必须用到水印。 Flink水印的本质是DataStream中的一种特殊元素，每个水印都携带有一个
阅读更多...
WordPress图片水印插件

WordPress图片水印插件

WordPress图片水印插件 强调图片版权，防止懒人直接盗图，给图片加上水印还是很必要的。图像处理熟手，对上传到主机的图片都会进行一些修饰，顺便加上水印，是很简单的事，但大部分童鞋还是喜欢能自动给图片加上水印，WordPress有强大的插件能为我们提供方便。 WordPress插件安装页面，输入“watermark ”关键词并搜索，会找到众多的图片加水印插件，比如： Easy Waterm
阅读更多...
录屏软件哪个好用免费无水印？微课录课软件推荐 屏幕录制工具app下载

录屏软件哪个好用免费无水印？微课录课软件推荐 屏幕录制工具app下载

随着在线教学、远程办公和自媒体创作的兴起，电脑录屏软件逐渐成为了许多用户的必备工具。市面上的录屏软件琳琅满目，但真正既好用又免费的却并不多见。今天为大家推荐几款好用的录屏软件，而且这些软件大多都是免费下载使用。赶快看看有没有你喜欢的吧！ 1、Bandicam（班迪录屏） Bandicam（班迪录屏）是一款简单好用的电脑屏幕录制软件，也是一款可以高清流畅地录游戏，录视频的功能强大的录屏工具。软件
阅读更多...
pdf怎么去水印？5个实用去水印方法新手必看（保姆级攻略）

pdf怎么去水印？5个实用去水印方法新手必看（保姆级攻略）

pdf怎么去水印？在日常的办公工作生活中，我们常常需要使用PDF文件。pdf格式文件非常流行，因为它兼具稳定性和安全性。但是，有时我们从网上下载的pdf文件会带有水印，这些水印不仅影响了文件的美观，还影响了别人的阅读体验。那pdf怎么去水印呢？今天小编就来给大家分享5个亲测有效的PDF去水印方法，下面一起来看看吧！ 方法一：金舟PDF编辑器 金舟PDF编辑器金舟PDF编辑器是一款轻巧易用的
阅读更多...
抖音视频怎么去水印保存到手机上

抖音视频怎么去水印保存到手机上

抖音已经成为人们日常消遣的主要平台之一。无论是搞笑的视频、感人的短片，还是充满创意的短视频，抖音总能给人带来无限的欢乐与惊喜。有时候我们可能会想要将喜欢的视频保存到手机上，方便离线观看或与朋友分享，但这些视频通常会带有抖音的水印。这篇文章将向大家介绍如何去除抖音视频的水印并保存到手机上。 1. 使用第三方工具网站去水印 许多第三方应用程序和网站可以帮助用户去除抖音视频的水印。例如，“视频解析器
阅读更多...
java图片添加水印文字

java图片添加水印文字

jAVA图片中添加文字水印（铺满整个图片） package com.zhuozhengsoft.mark; import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.Image; import java
阅读更多...
素材无水印素材网站在哪下载？高清的无水印素材资源库分享

素材无水印素材网站在哪下载？高清的无水印素材资源库分享

找高清无水印素材？蛙学网、Pixabay 等资源库全揭秘！ 创意十足的你，是不是常为网上素材的烦人水印而头疼？总在寻找高清、干净、无水印的素材资源，却无从下手？别急，今天就为大家推荐几个超实用的高清无水印素材资源库，让你的作品更上一层楼！ 蛙学网 作为优质素材网站的新秀，蛙学网为新手创作者提供了大量无水印的视频素材，不仅资源丰富，还有4K高清风景视频和情感类素材包。对于需要短视频素
阅读更多...
全民k歌怎么去水印保存？盘点分享3个无水印保存方法

全民k歌怎么去水印保存？盘点分享3个无水印保存方法

在全民K歌的世界里，我们尽情展现音乐才华，但有时却会遇到一个棘手的问题：如何将歌曲视频无水印保存，以便自由分享到其他社交平台？为了解决这一难题，本文将为你盘点三种简单有效的无水印保存方法，让你轻松去除视频水印，享受纯净的音乐分享。 方法一、奈斯水印助手（小程序） 推荐指数：☆☆☆☆☆ 奈斯水印助手，一款深受用户喜爱的去水印小程序，以其操作简便、效果出色而广受好评。它能够帮助你快速
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2