Bagaimana untuk melaksanakan tera air? Analisis ringkas beberapa cara untuk mencapai penanda air

Bagaimana untuk melaksanakan tera air? Artikel ini akan berkongsi dengan anda beberapa cara untuk melaksanakan tera air Rakan yang memerlukan boleh mempelajarinya~

Jika anda menghadapi masalah

Dalam kerja harian, kita sering menghadapi banyak data sensitif Untuk mengelakkan kebocoran data, kita perlu melakukan beberapa "pembungkusan" pada data. Tujuannya adalah untuk membuat "elemen penjenayah" yang berminat untuk membocorkan data melepaskan tingkah laku haram mereka di bawah "tekanan pendapat umum" yang teruk dan menjadikan mereka "percubaan jenayah" untuk mencapai kesan mengalahkan orang lain tanpa melawan. Bagi kita yang bekerja di bahagian keselamatan, konsep keselamatan data telah pun berakar umbi dalam tulang kita Setiap perkataan dan setiap gambar mesti berhati-hati sama ada terdapat risiko kebocoran persoalan yang kita fikirkan selama ini. Sebagai contoh, tera air gambar adalah isu yang sering kita hadapi dalam proses kerja kita. Kerana kandungan tugas saya adalah pembangunan platform semakan, beberapa gambar berisiko sering muncul di platform semakan Memandangkan kesedaran keselamatan pengulas adalah tidak sekata, untuk mengelakkan perkara yang tidak selamat daripada berlaku, adalah perlu untuk menambah tera air. gambar-gambar daripada.

Analisis Masalah

Pertama sekali, memandangkan senario perniagaan, masalah pada peringkat ini hanya membimbangkan tentang kebocoran data semasa proses semakan kami hanya menganggap eksplisit tanda air buat sementara waktu Tambahkan beberapa teks atau data lain pada gambar yang boleh mengenal pasti anda secara peribadi. Dengan cara ini, individu boleh dikesan berdasarkan data yang bocor Sudah tentu, fungsi yang paling penting adalah untuk mengambil langkah berjaga-jaga dan mencegah masalah sebelum ia berlaku.

Selesaikan masalah

Kaedah pelaksanaan

Terdapat banyak cara untuk melaksanakan tera air, yang boleh dibahagikan kepada Front- penanda air akhir dan penanda air bahagian belakang Kelebihan penanda air bahagian hadapan boleh diringkaskan dalam tiga mata Pertama, ia tidak menduduki sumber pelayan dan bergantung sepenuhnya pada kuasa pengkomputeran pelanggan, mengurangkan tekanan pada pelayan. Kedua, ia pantas Tidak kira pelaksanaan bahagian hadapan mana yang dilaksanakan, prestasinya lebih baik daripada bahagian belakang. Ketiga, pelaksanaannya mudah. Kelebihan terbesar melaksanakan penanda air pada bahagian belakang juga boleh diringkaskan dalam tiga perkara, iaitu keselamatan, keselamatan dan keselamatan. Zhihu dan Weibo kedua-duanya menggunakan penyelesaian tera air bahagian belakang. Walau bagaimanapun, selepas pertimbangan menyeluruh, kami masih menggunakan penyelesaian bahagian hadapan untuk melaksanakan penanda air. Yang berikut juga akan memperkenalkan secara ringkas cara nodejs melaksanakan penanda air imej bahagian belakang.

pelaksanaan nod

menyediakan tiga pakej npm Bahagian ini bukan fokus artikel kami, hanya demo ringkas disediakan.

1,

gm https://github.com/aheckmann/gm 6.4k bintang

const fs = require('fs');
const gm = require('gm');


gm('/path/to/my/img.jpg')
.drawText(30, 20, "GMagick!")
.write("/path/to/drawing.png", function (err) {
  if (!err) console.log('done');
});

Memerlukan GraphicsMagick atau ImageMagick untuk dipasang

2.

imej nod: https://github.com/zhangyuanwei/node-images

var images = require("images");

images("input.jpg")                     //Load image from file 
                                        //加载图像文件
    .size(400)                          //Geometric scaling the image to 400 pixels width
                                        //等比缩放图像到400像素宽
    .draw(images("logo.png"), 10, 10)   //Drawn logo at coordinates (10,10)
                                        //在(10,10)处绘制Logo
    .save("output.jpg", {               //Save the image to a file, with the quality of 50
        quality : 50                    //保存图片到文件,图片质量为50
    });

Tidak perlu memasang alat lain, ringan, dibangunkan oleh zhangyuanwei Cina, Dokumentasi Cina ;

3,

jimp: https://github.com/oliver-moran/jimp

boleh digunakan dengan gifwrap untuk merealisasikan tera air gif; >

Pelaksanaan bahagian hadapan

1. Imej latar belakang melaksanakan tera air skrin penuh

Anda boleh menyemak kesan pada peribadi. halaman maklumat di dalam dan di luar Alibaba Prinsip:

Kelebihan: Imej dihasilkan oleh bahagian belakang dan selamat

Keburukan : Perlu memulakan permintaan http untuk mendapatkan maklumat imej;

Paparan kesan : Memandangkan ia adalah sistem dalaman, ia tidak mudah untuk memaparkan kesannya.

2, DOM melaksanakan tera air imej penuh dan tera air imej

Dapatkan lebar dan ketinggian imej dalam acara onload imej, jana kawasan tera air mengikut imej saiz, dan sekatnya pada lapisan atas imej , kandungan DOM ialah penulisan salinan tera air atau maklumat lain, dan kaedah pelaksanaannya agak mudah.

Kelebihan: mudah dan mudah dilaksanakan;

const wrap = document.querySelector('#ReactApp');
const { clientWidth, clientHeight } = wrap;
const waterHeight = 120;
const waterWidth = 180;
// 计算个数
const [columns, rows] = [~~(clientWidth / waterWidth), ~~(clientHeight / waterHeight)]
for (let i = 0; i < columns; i++) {
    for (let j = 0; j <= rows; j++) {
        const waterDom = document.createElement(&#39;div&#39;);
        // 动态设置偏移值
        waterDom.setAttribute(&#39;style&#39;, `
            width: ${waterWidth}px; 
            height: ${waterHeight}px; 
            left: ${waterWidth + (i - 1) * waterWidth + 10}px;
            top: ${waterHeight + (j - 1) * waterHeight + 10}px;
            color: #000;
            position: absolute`
        );
        waterDom.innerText = &#39;测试水印&#39;;
        wrap.appendChild(waterDom);
    }
}

Kelemahan: terlalu besar atau terlalu banyak imej akan menjejaskan prestasi

Paparan kesan:

3, kaedah pelaksanaan kanvas (pelan pelaksanaan versi pertama)

Kaedah 1: Beroperasi terus pada imej

Tiada omong kosong lagi, hanya pergi ke kod

Kelebihan: Pelaksanaan bahagian depan tulen, gambar yang disalin dengan klik kanan juga ditanda air;

useEffect(() => {
      // gif 图不支持
    if (src && src.includes('.gif')) {
      setShowImg(true);
    }
    image.onload = function () {
      try {
        // 太小的图不加载水印
        if (image.width < 10) {
          setIsDataError(true);
          props.setIsDataError && props.setIsDataError(true);
          return;
        }
        const canvas = canvasRef.current;
        canvas.width = image.width;
        canvas.height = image.height;
        // 设置水印
        const font = `${Math.min(Math.max(Math.floor(innerCanvas.width / 14), 14), 48)}px` || fontSize;
        innerContext.font = `${font} ${fontFamily}`;
        innerContext.textBaseline = &#39;hanging&#39;;
        innerContext.rotate(rotate * Math.PI / 180);
        innerContext.lineWidth = lineWidth;
        innerContext.strokeStyle = strokeStyle;
        innerContext.strokeText(text, 0, innerCanvas.height / 4 * 3);
        innerContext.fillStyle = fillStyle;
        innerContext.fillText(text, 0, innerCanvas.height / 4 * 3);
        const context = canvas.getContext(&#39;2d&#39;);
        context.drawImage(this, 0, 0);
        context.rect(0, 0, image.width || 200, image.height || 200);
           // 设置水印浮层
        const pattern = context.createPattern(innerCanvas, &#39;repeat&#39;);
        context.fillStyle = pattern;
        context.fill();
      } catch (err) {
        console.info(err);
        setShowImg(true);
      }
    };
    image.onerror = function () {
      setShowImg(true);
    };
  }, [src]);

Kelemahan: GIF tidak disokong, gambar mesti disokong Cross-domain;

Paparan kesan: diberikan di bawah.

Kaedah 2: kanvas menjana url tera air dan menetapkannya kepada atribut latar belakang css

Kelebihan: Pelaksanaan bahagian hadapan tulen, menyokong merentas domain dan menyokong tera air imej git;

export const getBase64Background = (props) => {
  const { nick, empId } = GlobalConfig.userInfo;
  const {
    rotate = -20,
    height = 75,
    width = 85,
    text = `${nick}-${empId}`,
    fontSize = '14px',
    lineWidth = 2,
    fontFamily = 'microsoft yahei',
    strokeStyle = 'rgba(255, 255, 255, .15)',
    fillStyle = 'rgba(0, 0, 0, 0.15)',
    position = { x: 30, y: 30 },
  } = props;
  const image = new Image();
  image.crossOrigin = 'Anonymous';
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  context.font = `${fontSize} ${fontFamily}`;
  context.lineWidth = lineWidth;
  context.rotate(rotate * Math.PI / 180);
  context.strokeStyle = strokeStyle;
  context.fillStyle = fillStyle;
  context.textAlign = 'center';
  context.textBaseline = 'hanging';
  context.strokeText(text, position.x, position.y);
  context.fillText(text, position.x, position.y);
  return canvas.toDataURL('image/png');
};

// 使用方式 
<img  src="https://xxx.xxx.jpg" / alt="Bagaimana untuk melaksanakan tera air? Analisis ringkas beberapa cara untuk mencapai penanda air" >
<div className="warter-mark-area" style={{ backgroundImage: `url(${getBase64Background({})})` }} />

Kelemahan: Url base64 yang dihasilkan agak besar;

Paparan kesan: diberikan di bawah.

Malah, berdasarkan pelaksanaan kedua-dua kanvas ini, anda boleh menghasilkan kaedah ketiga dengan mudah, iaitu menutup lapisan atas gambar dengan kanvas bukan gambar dalam kaedah pertama, jadi bahawa anda boleh mengelakkan dua masalah dengan sempurna. Tetapi berhenti seketika dan fikirkan tentangnya. Adakah terdapat cara yang lebih mudah dan mudah untuk menggabungkan kedua-dua penyelesaian dan menggunakan kanvas untuk melukis? Ya, gunakan svg sebaliknya.

4, kaedah SVG (penyelesaian yang digunakan)

Memberi versi tindak balas komponen tera air.

export const WaterMark = (props) => {
  // 获取水印数据
  const { nick, empId } = GlobalConfig.userInfo;
  const boxRef = React.createRef();
  const [waterMarkStyle, setWaterMarkStyle] = useState('180px 120px');
  const [isError, setIsError] = useState(false);
  const {
    src, text = `${nick}-${empId}`, height: propsHeight, showSrc, img, nick, empId
  } = props;
  // 设置背景图和背景图样式
  const boxStyle = {
    backgroundSize: waterMarkStyle,
    backgroundImage: `url("data:image/svg+xml;utf8,<svg width=\&#39;100%\&#39; height=\&#39;100%\&#39; xmlns=\&#39;http://www.w3.org/2000/svg\&#39; version=\&#39;1.1\&#39;><text width=\&#39;100%\&#39; height=\&#39;100%\&#39; x=\&#39;20\&#39; y=\&#39;68\&#39;  transform=\&#39;rotate(-20)\&#39; fill=\&#39;rgba(0, 0, 0, 0.2)\&#39; font-size=\&#39;14\&#39; stroke=\&#39;rgba(255, 255, 255, .2)\&#39; stroke-width=\&#39;1\&#39;>${text}</text></svg>")`,
  };
  const onLoad = (e) => {
    const dom = e.target;
    const {
      previousSibling, nextSibling, offsetLeft, offsetTop,
    } = dom;
    // 获取图片宽高
    const { width, height } = getComputedStyle(dom);
    if (parseInt(width.replace(&#39;px&#39;, &#39;&#39;)) < 180) {
      setWaterMarkStyle(`${width} ${height.replace(&#39;px&#39;, &#39;&#39;) / 2}px`);
    };
    previousSibling.style.height = height;
    previousSibling.style.width = width;
    previousSibling.style.top = `${offsetTop}px`;
    previousSibling.style.left = `${offsetLeft}px`;
    // 加载 loading 隐藏
    nextSibling.style.display = &#39;none&#39;;
  };
  const onError = (event) => {
    setIsError(true);
  };
  return (
    <div className={styles.water_mark_wrapper} ref={boxRef}>
      <div className={styles.water_mark_box} style={boxStyle} />
      {isError
        ? <ErrorSourceData src={src} showSrc={showSrc} height={propsHeight} text="图片加载错误" helpText="点击复制图片链接" />
        : (
          <>
            <img onLoad={onLoad} referrerPolicy="no-referrer" onError={onError} src={src} alt="图片显示错误" />
            <Icon className={styles.img_loading} type="loading" />
          </>
        )
      }
    </div>
  );
};

优点：支持 gif 图水印，不存在跨域问题，使用 repeat 属性，无插入 dom 过程，无性能问题；
缺点：。。。

dom 结构展示：

5，效果图展示

canvas 和 svg 实现的效果在展示上没有很大的区别，所以效果图就一张图全部展示了。

QA

问题一：

如果把 watermark 的 dom 删除了，图片不就是无水印了吗？

答案：

可以利用 MutationObserver 监听 water 的节点，如果节点被修改，图片也随之隐藏；

问题二：

鼠标右键复制图片？

答案：

全部的图片都禁用了右键功能

问题三：

如果从控制台的network获取图片信息呢？

答案：

此操作暂时没有想到好的解决办法，建议采用后端实现方案

总结

前端实现的水印方案始终只是一种临时方案，业务后端实现又耗费服务器资源，其实最理想的解决方式就是提供一个独立的水印服务，虽然加载过程中会略有延迟，但是相对与数据安全来说，毫秒级的延迟还是可以接受的，这样又能保证不影响业务的服务稳定性。

在每天的答疑过程中，也会有很多业务方来找我沟通水印遮挡风险点的问题，每次只能用数据安全的重要性来回复他们，当然，水印的大小，透明度，密集程度也都在不断的调优中，相信会有一个版本，既能起到水印的作用，也能更好的解决遮挡问题。

原文地址：https://segmentfault.com/a/1190000040425430

作者：ES2049 /卜露

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan tera air? Analisis ringkas beberapa cara untuk mencapai penanda air. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!