Comment implémenter le filigrane ? Une brève analyse de plusieurs façons de réaliser le filigrane

Comment implémenter le filigrane ? Cet article partagera avec vous plusieurs façons de mettre en œuvre des filigranes. Les amis dans le besoin peuvent en apprendre davantage ~

Problèmes rencontrés

Dans le travail quotidien, nous rencontrons souvent de nombreuses données sensibles afin d'empêcher les données. fuites, nous devons faire un certain "packaging" sur les données. L'objectif est d'amener les « éléments criminels » intéressés par la fuite de données à abandonner leur comportement illégal sous la forte « pression de l'opinion publique » et à en faire des « tentatives criminelles » pour obtenir l'effet de vaincre les autres sans se battre. Quant à ceux d'entre nous qui travaillent dans le service de sécurité, le concept de sécurité des données est déjà profondément ancré dans nos os. Chaque mot et chaque image doivent tenir compte de l'existence ou non d'un risque de fuite de données. question à laquelle nous avons réfléchi. Par exemple, le filigrane des images est un problème que nous rencontrons souvent dans notre processus de travail. Étant donné que le contenu de mon travail est le développement de la plateforme d'évaluation, certaines images risquées apparaissent souvent sur la plateforme d'évaluation. Étant donné que la sensibilisation à la sécurité des évaluateurs est inégale, afin d'éviter que des choses dangereuses ne se produisent, il est nécessaire d'ajouter des filigranes. les photos de.

Analyse du problème

Tout d'abord, compte tenu du scénario commercial, le problème à ce stade est simplement de s'inquiéter de la fuite de données lors du processus de révision. Pour le moment, nous ne considérons que les filigranes explicites, ce qui nécessite d'en ajouter. texte à l’image qui peut distinguer votre identité personnelle ou d’autres données. De cette manière, les individus peuvent être retrouvés sur la base des données divulguées. Bien entendu, sa fonction la plus importante est de prendre des précautions et de prévenir les problèmes avant qu'ils ne surviennent.

Résoudre le problème

Méthodes de mise en œuvre

Il existe de nombreuses façons de mettre en œuvre les filigranes Selon la division du personnel qui met en œuvre les fonctions, elles peuvent être divisées en filigranes front-end et back-end. Les avantages des filigranes frontaux peuvent être résumés en trois points. Premièrement, ils n'occupent pas les ressources du serveur et s'appuient entièrement sur la puissance de calcul du client, réduisant ainsi la pression sur le serveur. Deuxièmement, c'est rapide, quelle que soit l'implémentation frontale implémentée, les performances sont meilleures que celles du back-end. Troisièmement, la mise en œuvre est simple. Le plus grand avantage de la mise en œuvre du filigrane sur le backend peut également être résumé en trois points, à savoir la sécurité, la sécurité et la sécurité. Zhihu et Weibo utilisent tous deux des solutions de filigrane back-end. Cependant, après un examen approfondi, nous adoptons toujours la solution frontale pour mettre en œuvre le filigrane. Ce qui suit présentera également brièvement comment nodejs implémente le filigrane d'image back-end.

node Implementation

fournit trois packages npm. Cette partie n'est pas l'objet de notre article, seule une simple démo est fournie.

1, gm https://github.com/aheckmann/gm 6,4k étoiles

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');
});

Nécessite l'installation de GraphicsMagick ou ImageMagick

2, node-images : 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
    });

Pas besoin d'installer d'autres outils, légers, développés par zhangyuanwei chinois, documentation chinoise ;

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

peut être implémenté avec le filigrane gifwrap gif ;

Implémentation frontale

1, l'image d'arrière-plan implémente le filigrane plein écran

Vous pouvez vérifier l'effet sur la page d'informations personnelles à l'intérieur et à l'extérieur d'Alibaba, principe :

Avantages : L'image est générée par le backend, en toute sécurité ;

Inconvénients : Nécessité de lancer une requête http pour obtenir des informations sur l'image ;

Affichage de l'effet : Puisqu'il s'agit d'un système interne, il n'est pas pratique d'afficher l'effet.

2, DOM implémente le filigrane d'image complet et le filigrane d'image

Obtenez la largeur et la hauteur de l'image dans l'événement de chargement de l'image, générez la zone de filigrane en fonction de la taille de l'image, bloquez-la sur la couche supérieure de l'image, et le contenu du DOM est la rédaction ou d'autres informations du filigrane, pour réaliser la méthode est relativement simple.

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);
    }
}

Avantages : simple et facile à mettre en œuvre ;

Inconvénients : des images trop grandes ou trop nombreuses affecteront les performances

Affichage de l'effet :

3, implémentation du canevas (plan de mise en œuvre de la première version)

Méthode 1 : Opérez directement sur l'image

Plus de bêtises, téléchargez simplement le code

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]);

Avantages : Implémentation frontale pure, l'image copiée par clic droit est également filigranée ;

Inconvénient : le GIF n'est pas pris en charge, l'image doit prendre en charge Cross-domain ;

Affichage de l'effet : indiqué ci-dessous.

Méthode 2 : Canvas génère l'URL du filigrane et l'attribue à l'attribut d'arrière-plan CSS

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="Comment implémenter le filigrane ? Une brève analyse de plusieurs façons de réaliser le filigrane" >
<div className="warter-mark-area" style={{ backgroundImage: `url(${getBase64Background({})})` }} />

Avantages : Implémentation frontale pure, prend en charge plusieurs domaines, prend en charge le filigrane d'image git

Inconvénient : L'URL base64 générée est ; relativement grand ;

Affichage de l'effet : donné ci-dessous.

En fait, sur la base de la mise en œuvre de ces deux toiles, vous pouvez facilement trouver la troisième méthode, qui consiste à recouvrir la couche supérieure de l'image avec une toile sans image dans la première méthode, afin de pouvoir parfaitement éviter les inconvénients des deux solutions. Mais arrêtez-vous un instant et réfléchissez-y. Existe-t-il un moyen plus simple et plus simple de combiner les deux solutions et d'utiliser la toile pour dessiner ? Oui, utilisez plutôt svg.

4, méthode SVG (la solution actuellement utilisée)

donne une version réactive du composant filigrane.

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 /卜露

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!