<> Quick use

use idea open first.html, That is to start a front-end project , Opening directly will report a cross domain error .

After opening , Select the picture you want to view . Take the second picture of sweet rain here as an example , After opening, you will reach the secondary page , The secondary page includes four pictures :

These four pictures show : Original drawing , Graph with explicit watermark , digital watermarking , Graph with dark watermark .

Click on the last picture , The watermark will be parsed .

<> Code parsing

Under the secondary interface folder , Have each html file , One css file , One js file .

each html Will be linked to css and js file ,html There is only one in the Central Plains img label .css The file is nothing , Is to regulate the size of the picture . Focus on js In the file .

waterMark.js The body of defines two global variables , And implemented run method .
var darkCanvas; var created=0; run();
Next, please see run method .
async function run() { const url =
document.getElementsByClassName("img")[0].src; const img =
document.createElement("img"); img.src = url; img.crossOrigin='Anonymous';
await new Promise((resolve) => (img.onload = resolve)); let canvas =
document.createElement("canvas"); canvas.width = img.width * 400 / img.height;
canvas.height = 400; // Visible watermark bright(canvas,img);
document.body.appendChild(document.createElement("br")); // White words on black background display watermark let
waterMarkCanvas=waterMark(canvas); // Show invisible watermark dark(canvas,img,waterMarkCanvas); }
* run Method will get that picture src catalogue , Then try to load the picture , And create a new canvas , Specifies the width and height of the canvas The degree is the same as the picture .
* Then call bright method , Get a clear watermark picture . Then add a new line after it ( For beauty ).
* Then call waterMark method , Display the digital watermark , And get the canvas of digital watermark .
* Last call dark method , Get a picture of a dark watermark .
Next, please see bright method :
function bright(canvas,img) { let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.fillStyle = "#FFF";
ctx.font = "24px Blackbody "; ctx.fillText("191250025 Ding Xiaoyu ", 20, 350); draw(canvas); }
bright Method to draw the picture on the canvas , And added some settings to the context of the canvas , Then call draw method , Output canvas as picture .

Next, please see draw method :
function draw(canvas) { let img = new Image(); img.src =
canvas.toDataURL("image/png"); document.body.appendChild(img); }
draw The method is simple , Output canvas as picture , And put it in the current body After the last element .

Next, please see waterMark method :
function waterMark(canvas) { let ctx=canvas.getContext("2d");
ctx.fillStyle="#000"; ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "#FFF"; ctx.font = "24px Blackbody "; ctx.fillText("191250025 Ding Xiaoyu ", 20,
350); draw(canvas); return canvas; }
and bright The method is similar , Directly set the canvas to all black , Then draw a watermark on it .

Next, please see dark method :
function dark(canvas,img,waterMarkCanvas) { let
temp=waterMarkCanvas.getContext("2d").getImageData(0,0,canvas.width,canvas.heigh
t).data; canvas.getContext("2d").drawImage(img, 0, 0, canvas.width,
canvas.height); let
digits=canvas.getContext("2d").getImageData(0,0,canvas.width,canvas.height);
for (let i=0; i<digits.data.length; i=i+4) { if (temp[i] === 0) { } } }
canvas.getContext("2d").putImageData(digits,0,0); draw(canvas); let
images=document.body.getElementsByTagName("img"); let
image=images[images.length-1]; image.addEventListener("click", unload);
darkCanvas=canvas; }
Firstly, the watermark canvas and image canvas are obtained image information . We note that , One pixel in the picture corresponds to four numbers in the array ,
In the watermark canvas , If a point does not belong to the watermark , Then this point is (0,0,0,255). Considering that the two canvases are the same size , I We can make such records : If the first value of a point on the watermark canvas is
0, The first point of the corresponding position on the picture Canvas Set value to even , Otherwise, set the first value of the point at the corresponding position to an odd number . After this treatment , We judge the picture on the canvas
The parity of the first value corresponding to each point of , An odd number indicates the location of the watermark , An even number indicates a location that is not a watermark .

Then draw the processed data , And add a click listener to this picture , Bound unload This method , Then write it down The current canvas .

Next, please see unload method :
function unload() { if (created===1) { return; } let
ctx=darkCanvas.getContext("2d"); let
digits=ctx.getImageData(0,0,darkCanvas.width,darkCanvas.height); for (let i=0;
i<digits.data.length; i=i+4) { if (digits.data[i] % 2 === 1) { digits.data[i] =
digits[i + 1] = digits[i + 2] = digits[i + 3] = ; } }
ctx.putImageData(digits,0,0); draw(darkCanvas); created=1; }
First, judge if it has been decoded , No more decoding .

Then we image information , Judge the parity of the first number of each pixel . If it's odd , Indicates the watermark bit , Turn all four values of this pixel into 255.

Technology
©2019-2020 Toolsou All rights reserved,
C++ of string of compare usage MySQL Basics Commonly used sentence ( Add / delete / modify query )C Language of a Gobang game implementation QT5.9 Use of learning notes QSqlQuery Method of Qt Getting Started tutorial 【 Basic controls 】QCalendarWidget calendar control java Polymorphic array of web Front end signature plug-in _signature_pad Plug in implements electronic signature function centos7 install RabbitMqspringboot use redis Experiment 4 Automated test tools - software test