前端頁面水印生成實現

LoadChange發表於2018-08-01
前端

最近在刷到一篇關於水印的文章，作者分享的幾種實現方式，結合到自己的專案也有用到，所以將主要的前端生成策略進行了封裝，以便日後專案使用。

前端頁面水印生成實現

Github |  NPM ｜  DEMO

canvas 生成方式

canvas 有著不錯的相容性，是一種比較可靠、成熟的視覺化技術。但是它比較依賴解析度，對文字的處理上也有著先天的不足。但是它可以很方便的將結果儲存為圖片，對於完成水印的需求也是非常合適的。

前端頁面水印生成實現

為了方便使用者上手，我將所有的實現座標都設定為top/left，以方便對x、y的設定。

export default class CanvasWay {
    constructor(watermark) {
        this.watermark = watermark
        const {width, height} = watermark
        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('width', width);
        this.canvas.setAttribute('height', height);
    }

    render() {
        const {txt, x, y, width, height, font, color, fontSize, alpha, angle} = this.watermark
        const ctx = this.canvas.getContext('2d');
        ctx.clearRect(0, 0, width, height);
        ctx.textBaseline = 'top';
        ctx.textAlign = 'left'
        ctx.fillStyle = color;
        ctx.globalAlpha = alpha;
        ctx.font = `${fontSize}px ${font}`
        ctx.translate(x, y)
        ctx.rotate(Math.PI / 180 * angle);
        ctx.translate(-x, -y - fontSize)
        ctx.fillText(txt, x, y + fontSize);
        return this.canvas.toDataURL();
    }
}
複製程式碼

svg 生成方式

svg 與 canvas 相比瀏覽器相容性幾乎一致，除了幾個早期的 Android 版本，這樣的裝置以及很難找到了，完全可以忽略。svg 使用的是 XML 的方式，不依賴解析度，在做文字水印這件事上 svg 有著更好的優勢。

前端頁面水印生成實現

svg 的 text 屬性 x、y，是將文字左下位置定位到其座標系的(x,y)位置，這可能和日常寫 css 的定位不同，所有需要有一個 dy 值，設定其偏移量。

export default class SvgWay {
    constructor(watermark) {
        this.watermark = watermark
    }

    render() {
        const {txt, x, y, width, height, color, font, fontSize, alpha, angle} = this.watermark
        const svgStr =
            `<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px">
                <text x="${x}px" y="${y}px" dy="${fontSize}px"
                    text-anchor="start"
                    stroke="${color}"
                    stroke-opacity="${alpha}"
                    fill="none"
                    transform="rotate(${angle},${x} ${y})"
                    font-weight="100"
                    font-size="${fontSize}"
                    font-family="${font}"
                    >
                    ${txt}
                </text>
            </svg>`;
        return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;
    }
}
複製程式碼

element 生成方式

使用元素生成是一種很傳統的方式，在本次實踐中，我並沒有考慮相容性，因為使用了 CSS3 的屬性 transform 所以在ie9 以下也是不能勝任的，但是因為有這種方式的實現，我們可以根據需求在後續補充不同的瀏覽器 Hack，如： filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 使用這些程式碼，就可以完整覆蓋到更多的瀏覽器。

import bindCSS from '../helpers/bindCSS'

export default class ElementWay {
    constructor(watermark) {
        this.watermark = watermark
    }

    _createItem() {
        let {txt, x, y, font, color, fontSize, alpha, angle, width, height} = this.watermark
        const item = document.createElement('div');
        bindCSS(item, {
            position: 'relative',
            width, height,
            flex: `0 0 ${width}px`,
            overflow: 'hidden',
            pointerEvents: 'none'
        })
        let span = document.createElement('span');
        span.innerHTML = txt
        bindCSS(span, {
            position: 'absolute',
            top: `${y}px`,
            left: `${x}px`,
            fontFamily: font,
            fontSize: `${fontSize}px`,
            color: color,
            lineHeight: 1.5,
            opacity: alpha,
            fontWeight: 400,
            transform: `rotate(${angle}deg)`,
            transformOrigin: '0 0',
            userSelect: 'none',
            whiteSpace: 'nowrap',
            overflow: 'hidden'
        })
        item.appendChild(span)
        return item;
    }

    render() {
        const {width, height} = this.watermark
        const {clientWidth, clientHeight} = document.documentElement || document.body
        const column = Math.ceil(clientWidth / width)
        const rows = Math.ceil(clientHeight / height)
        const wrap = document.createElement('div');
        bindCSS(wrap, {
            display: 'flex',
            flexWrap: 'wrap',
            width: `${width * column}px`,
            height: `${height * rows}px`
        })
        for (let i = 0; i < column * rows; i++) {
            wrap.appendChild(this._createItem());
        }
        return wrap;
    }
}
複製程式碼

MutationObserver 元素異動監控

MutationObserver 對現代瀏覽的相容性還是不錯的，MutationObserver是變動觀察器，字面上就可以理解這是用來觀察Node（節點）變化的。MutationObserver是在DOM4規範中定義的，它的前身是MutationEvent事件，最低支援版本為 ie9 ，目前已經被棄用。

前端頁面水印生成實現

在這裡我們主要觀察的有三點

  • 水印元素本身是否被移除
  • 水印元素屬性是否被篡改（display:none ...）
  • 水印元素的子元素是否被移除和篡改 （主要考慮 element的實現方式 ）

為了更少的觸發觀察者，我寫了兩個配置，第一個針對水印元素本身 {characterData: true, attributes: true, childList: true, subtree: true} 對所有的異動處理，第二個觀察者主要對 body 下的 {childList: true} 敏感，也就是子元素的改變，在 body 觀察者的回撥只對有 removedNodes 這件事做出反應。

const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

export const observer = (callback) => {
    if (!MutationObserver) return false
    let bodyObserver = new MutationObserver(
        mutationsList => mutationsList.forEach(mutation =>
            mutation.removedNodes.forEach(
                _target => _target.id === _id && callback()
            )
        )
    )
    bodyObserver.observe(document.body, {childList: true});
    const target = document.getElementById(_id);
    let observer = new MutationObserver(callback);
    observer.observe(target, {characterData: true, attributes: true, childList: true, subtree: true});
    return {bodyObserver, observer};
}
複製程式碼

最終工具呼叫方式

    gwm.creation({
        mode: 'svg',
        watch: false,
        fontSize: 13,
        color: '#000',
        font: 'sans-serif',
        alpha: 0.2,
        angle: -15
    })
複製程式碼

Github |  NPM ｜  DEMO

相關文章