JS去除图片水印

今天帮助同事去除一个文件的水印，找了很多工具，要么收费，要么去除效果不理想。最终在GITHUB上看到一位网友分享的JS去除图片水印。本篇笔记仅做收藏。

JS去水印源码：

  1. function getResultImgUrl(img) {
  2.     debugger
  3.     var canvas = document.getElementById("canvas");
  4.     canvas.width = img.width;
  5.     canvas.height = img.height;
  6.     var ctx = canvas.getContext("2d");
  7.     ctx.drawImage(img, 0, 0);
  8.     var c = ctx.getImageData(0, 0, img.width, img.height);
  9.     c.data.forEach((val, index) => {
  10.         if (val <= 15 && val !== 0) {
  11.             c.data[index] = 0;
  12.         }
  13.     });
  14.     console.log(c.data);
  15.     var colorList = [];
  16.     //chrome浏览器报错，ie浏览器报安全错误信息，原因往下看
  17.     for (var i = 0; i < c.height; ++i) {
  18.         for (var j = 0; j < c.width; ++j) {
  19.             var x = i * 4 * c.width + 4 * j,  //imagedata读取的像素数据存储在data属性里，是从上到下，从左到右的，每个像素需要占用4位数据，分别是r,g,b,alpha透明通道
  20.                 r = c.data[x],
  21.                 g = c.data[x + 1],
  22.                 b = c.data[x + 2],
  23.                 a = c.data[x + 3];
  25.             if (a !== 0) {
  26.                 r = 255;
  27.                 g = 255;
  28.                 b = 255;
  29.             }
  31.             colorList.push({
  32.                 r, g, b, a
  33.             })
  34.         }
  35.     }
  36.     console.log(colorList);
  37.     let res = [];
  38.     // for (let i = 0; i < colorList.length * 4; i ++) {
  39.     //     res.
  40.     // }
  41.     colorList.forEach(item => {
  42.         res.push(item.r);
  43.         res.push(item.g);
  44.         res.push(item.b);
  45.         res.push(item.a);
  46.     });
  47.     for (let i = 0; i < res.length; i ++) {
  48.         c.data[i] = res[i];
  49.     }
  50.     console.log(c);
  51.     ctx.putImageData(c, 0, 0, 0, 0, 256, 256);
  52.     document.getElementById('btn').href = canvas.toDataURL();
  53. }
  55. function changepic() {
  56.     var reads = new FileReader();
  57.     var f = document.getElementById('upload').files[0];
  58.     reads.readAsDataURL(f);
  59.     reads.onload = function (e) {
  60.         document.getElementById('show').src = this.result;
  61.     };
  62. }
  64. window.onload = function () {
  65.     document.getElementById('upload').onchange = function () {
  66.         changepic()
  67.     };
  68.     document.getElementById('downloadFileName').onchange = function () {
  69.         document.getElementById('btn').download = this.value;
  70.     }
  71.     var img = document.getElementById('show');
  72.     img.src = "";
  73.     img.isLoad = false;
  74.     img.onload = function () {
  75.         if (!img.isLoad && img.src) {
  76.             getResultImgUrl(img);
  77.             img.isLoad = true;
  78.         }
  79.     }
  80. }

github地址：https://github.com/Caozefu/ImageDewatermarking

在线演示：https://caozefu.github.io/ImageDewatermarking/

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！