ホームページ > 記事 > ウェブフロントエンド > ウォーターマークを実装するにはどうすればよいですか?透かしを実現するいくつかの方法の簡単な分析
ウォーターマークを実装するにはどうすればよいですか?この記事では、ウォーターマークを実装するいくつかの方法を紹介します。困っている友達はそれについて学ぶことができます~
1,
gm https://github.com/aheckmann/gm 6.4k starconst 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');
});
GraphicsMagick または ImageMagick のインストールが必要です;
2、
node-images:https://github.com/zhangyuanwei/node-imagesvar 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
});
他のツールをインストールする必要はありません、軽量、zhangyuanwei によって開発されました、中国語、中国語のドキュメント;
3、
jimp: https://github.com/oliver-moran/jimp を gifwrap とともに使用して、gif ウォーターマークを実装できます。
フロントエンドの実装内部の個人情報ページで効果を確認できます。原則:
利点: 画像はバックエンドによって生成され、安全です; 欠点:画像情報を取得するために http リクエストを開始します;
エフェクト表示: 内部システムであるため、エフェクトを表示するのは不便です。
2、dom は画像全体のウォーターマークと画像ウォーターマークを実装します。画像の onload イベントで画像の幅と高さを取得し、画像に応じてウォーターマーク領域を生成します。 DOM の内容はウォーターマークのコピーライティングやその他の情報であり、実装方法は比較的簡単です。 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('div');
// 动态设置偏移值
waterDom.setAttribute('style', `
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 = '测试水印';
wrap.appendChild(waterDom);
}
}
利点: シンプルで実装が簡単;
欠点: 画像が大きすぎる、または多すぎるとパフォーマンスに影響します;
効果の表示:
#3、キャンバスの実装方法(初版実装案)
方法1: 画像を直接操作する
これ以上の苦労はせずに、直接コードに進みましょう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 = 'hanging'; 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('2d'); context.drawImage(this, 0, 0); context.rect(0, 0, image.width || 200, image.height || 200); // 设置水印浮层 const pattern = context.createPattern(innerCanvas, 'repeat'); context.fillStyle = pattern; context.fill(); } catch (err) { console.info(err); setShowImg(true); } }; image.onerror = function () { setShowImg(true); }; }, [src]);長所: 純粋なフロントエンド実装、右クリックしてコピーした画像にも透かしが入ります; 短所: GIF はサポートされていません。画像はクロスドメインをサポートする必要があります; 効果の表示: 以下に示します。
方法 2: キャンバスはウォーターマーク URL を生成し、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="ウォーターマークを実装するにはどうすればよいですか?透かしを実現するいくつかの方法の簡単な分析" > <div className="warter-mark-area" style={{ backgroundImage: `url(${getBase64Background({})})` }} />利点: 純粋なフロントエンド実装、クロスドメインのサポート、git イメージのサポートウォーターマーク;
欠点: 生成される Base64 URL は比較的大きい;
効果の表示: 以下に示されます。 実際、これら 2 つのキャンバスの実装に基づいて、3 番目の方法を簡単に思いつくことができます。これは、最初の方法で画像の上層を非画像キャンバスで覆うことです。この計画の欠点は、この 2 つの問題を完全に回避できることです。しかし、少し立ち止まって考えてみてください。2 つのソリューションを組み合わせて、キャンバスを使用して描画する、よりシンプルで簡単な方法はないだろうか?はい、代わりに svg を使用してください。4、SVG メソッド (使用されているソリューション)
ウォーターマーク コンポーネントの反応バージョンを提供します。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=\'100%\' height=\'100%\' xmlns=\'http://www.w3.org/2000/svg\' version=\'1.1\'><text width=\'100%\' height=\'100%\' x=\'20\' y=\'68\' transform=\'rotate(-20)\' fill=\'rgba(0, 0, 0, 0.2)\' font-size=\'14\' stroke=\'rgba(255, 255, 255, .2)\' stroke-width=\'1\'>${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('px', '')) < 180) { setWaterMarkStyle(`${width} ${height.replace('px', '') / 2}px`); }; previousSibling.style.height = height; previousSibling.style.width = width; previousSibling.style.top = `${offsetTop}px`; previousSibling.style.left = `${offsetLeft}px`; // 加载 loading 隐藏 nextSibling.style.display = 'none'; }; 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 实现的效果在展示上没有很大的区别,所以效果图就一张图全部展示了。
问题一:
如果把 watermark 的 dom 删除了,图片不就是无水印了吗?
答案:
可以利用 MutationObserver 监听 water 的节点,如果节点被修改,图片也随之隐藏;
问题二:
鼠标右键复制图片?
答案:
全部的图片都禁用了右键功能
问题三:
如果从控制台的network获取图片信息呢?
答案:
此操作暂时没有想到好的解决办法,建议采用后端实现方案
前端实现的水印方案始终只是一种临时方案,业务后端实现又耗费服务器资源,其实最理想的解决方式就是提供一个独立的水印服务,虽然加载过程中会略有延迟,但是相对与数据安全来说,毫秒级的延迟还是可以接受的,这样又能保证不影响业务的服务稳定性。
在每天的答疑过程中,也会有很多业务方来找我沟通水印遮挡风险点的问题,每次只能用数据安全的重要性来回复他们,当然,水印的大小,透明度,密集程度也都在不断的调优中,相信会有一个版本,既能起到水印的作用,也能更好的解决遮挡问题。
原文地址:https://segmentfault.com/a/1190000040425430
作者:ES2049 /卜露
更多编程相关知识,请访问:编程视频!!
以上がウォーターマークを実装するにはどうすればよいですか?透かしを実現するいくつかの方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。