Home

Awesome

watermark-image

watermarkImage.js是图片水印组件,降低数据泄密风险。目前只支持马赛克,后续会研发用于其他地方

1、图片水印插件原理

1、创建一个image对象对图片进行加载;

2、加载成功后,将图片写入canvas画布中;

3、然后从画布中取出图片的所有像素点,取出打马赛克位置的RGB值来画马赛克。

image

2、图片水印插件--使用

2.1本地引入封装的js文件

不需要引用jquery,watermarkImage.js是必须引入的组件。

第一步: git clone https://github.com/saucxs/watermark-image.git

第二步: 在需要加载图片的地方,是file文件对象,引入watermarkImage.js文件

第三步:在确保dom加载完毕之后,

var img = new DealImage({
                target: "#canvas",
                mosaicSize: 10,
                image: this.files[0]
            })

            img.draw({
                type: "image/png",
                mosaic: {
                    position: [
                        {start: [100, 100], end: [200, 200]},
                        {start: [400, 100], end: [500, 200]},
                        {start: [300, 300], end: [400, 400]},
                    ],
                },
                frame: {
                    position: [
                        {start: [100, 100], end: [200, 200]},
                         {start: [400, 100], end: [500, 200]},
                        {start: [300, 300], end: [400, 400]},
                    ],
                    color: "red"
                },
                callback: function(imgBase64, filename) {
                    let imgEle = document.querySelector("img");
                    imgEle.src = imgBase64;

                }
            })

3、图片水印插件-testTool(测试工具)

欢迎访问:https://www.mwcxs.top/static/testTool/image/index.html

4、版本功能

5、测试工具截图

image