文档章节

使用js添加图片水印及马赛克

o
 osc_wxsc35it
发布于 07/01 15:59
字数 578
阅读 20
收藏 0

精选30+云产品,助力企业轻松上云!>>>

基于react-hooks封装图片水印和马赛克的方法

//封装的picWaterMark函数
const picWaterMark = ({
    url = '',//需要添加水印的图片地址,默认没给
    textAlign = 'center',//水印位置
    textBaseline = 'middle',//水印位置
    content = '水印水印水印',//默认水印内容
    callback = null,//回调函数
}) => {
    const img = new Image();//创建img对象节点
    img.src = url;
    //crossOrigin属性设置会产生跨域问题需要在服务器上添加Access-Control-Allow-Origin:*,
    //后端解决,不设置此属性toDataURL()不能使用
    img.crossOrigin = 'anonymous';
    img.onload = function() {
        const canvas = document.createElement('canvas');//创建canvas节点
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');//统一设置
        ctx.drawImage(img, 0, 0, img.width,img.height);
        
        const size = 5;//马赛克大小
        //获取老图所有像素点
        const oldImg = ctx.getImageData(0,0,img.width,img.height)
        //获取新图像素对象
        const newImg = ctx.createImageData(img.width,img.height)
        
        //遍历旧图片获取像素点,并打乱随机将新像素点写入新图片
        for(var i = 0; i < oldImg.width; i++) {
            for(var j = 0; j < oldImg.height; j++) {
              //从5*5中获取单个像素信息
              var color = getPxInfo(oldImg, Math.floor(i * size + Math.random() * size), Math.floor(j * size + Math.random() * size))
              //写入单个像素信息
              for(var a = 0; a < size; a++) {
                for(var b = 0; b < size; b++) {
                  setPxInfo(newImg, i * size + a, j * size + b, color);
                }
              }
            }
          }
          ctx.putImageData(newImg, 0, 0)

           //读取单个像素信息
        function getPxInfo(imgDate, x, y) {
            var colorArr = [];
            var width = imgDate.width;
            colorArr[0] = imgDate.data[(width * y + x) * 4 + 0]
            colorArr[1] = imgDate.data[(width * y + x) * 4 + 1]
            colorArr[2] = imgDate.data[(width * y + x) * 4 + 2]
            colorArr[3] = imgDate.data[(width * y + x) * 4 + 3]
            return colorArr;
        }
        //写入单个像素信息
        function setPxInfo(imgDate, x, y, colors) {
            //(x,y) 之前有多少个像素点 == width*y + x
            var width = imgDate.width;
            imgDate.data[(width * y + x) * 4 + 0] = colors[0];
            imgDate.data[(width * y + x) * 4 + 1] = colors[1];
            imgDate.data[(width * y + x) * 4 + 2] = colors[2];
            imgDate.data[(width * y + x) * 4 + 3] = colors[3];
        }
        
		//水印样式的设置
        ctx.textAlign = textAlign;
        ctx.textBaseline = textBaseline;
        ctx.fillStyle = 'red';
        ctx.fillText(content, img.width-45,img.height-15);   
        //将添加水印和马赛克之后的图片转为base64格式
        const base64Url = canvas.toDataURL();
        回调函数将base64Url传入
        callback && callback(base64Url);
    }
}

实际调用

	const [url, setUrl] = useState('')//定义url

		picWaterMark({
           	url: ’https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png‘,
         	content: '这里是水印内容',
            callback: (base64Url) => { 
            //自定义保存数据的方法将base64Url存起来使用                            
             console.log(base64Url)
             //这里使用的是useState写法
             setUrl(base64Url)
            }
        }) 
//渲染部分的使用
<img src={url} alt=''/>
效果图展示

o
粉丝 0
博文 58
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
使用js添加图片水印及马赛克

JavaScript给图片添加水印及马赛克 基于react-hooks封装图片水印和马赛克的方法 实际调用 基于react-hooks封装图片水印和马赛克的方法 实际调用 效果图展示...

zeal_Y
06/30
0
0
vue + canvas 图片加水印

思路:将两张图片绘制为一张 目标:输入的文字,绘制到图片上,简单实现图片水印 效果:输入的文字1: ‘你猜猜’ + 图片2 = 图片3(不要看清除水印的按钮,本人垃圾 没实现) 选择图片 html...

osc_wme0cmft
04/16
16
0
Java 实现在线给word 文档添加水印

1:描述 在线编辑文档后需要添加专属水印。防止文档被盗用。 2:方案 用 pageoffice 提供的 添加水印的方法 3:核心代码 (1)后台方法添加文字水印 (2)后台方法添加图片水印 (3)用 js 方...

qianxi
2019/01/22
47
0
带你使用canvas制作马赛克&canvas飞鸟动画&小球动画

文章目录 canvas制作马赛克&飞鸟动画&小球拖拽动画 一、了解单像素操作 1、在canvas中的像素操作 到目前为止,我们尚未深入了解Canvas画布真实像素的原理,事实上, 你可以直接通过ImageData...

osc_04b0bwu2
04/27
19
0
Dedecmsv5.7整合ueditor 图片上传添加水印

最近的项目是做dedecmsv5.7的二次开发,被要求上传的图片要加水印,百度ueditor编辑器不支持自动加水印,所以,找了很多资料整合记录一下,具体效果图 这里不仔细写dedecmsv5.7 整合ueditor...

osc_62egr8or
2019/01/03
3
0

没有更多内容

加载失败,请刷新页面

加载更多

功率放大芯片IR2184介绍

IR2184引脚定义: IN一般为脉冲信号,即全桥电路中的pwm波信号,一般可以通过调节它的占空比来控制智能车电机的转速。 SD信号为使能信号,高电平有效,芯片工作。 Vb是高侧浮动电源输入脚,H...

osc_baeiwmv4
16分钟前
15
0
认知成长:聊聊专业性和职业性

最近在忙双十一全链路压测的事情,由于岗位职责和团队定位等原因,和很多部门以及不同角色的同事都有接触。上周和某个团队的Leader开完会,简短的聊了下工作的推动和协同的一些事项。关键词就...

老_张
2019/10/21
7
0
百万年薪程序员的7点能力

点击蓝字关注,回复“职场进阶”获取职场进阶精品资料一份 几周前,微盟爆了个大雷,数据库让内部员工删库跑路。写了篇文章,做了一些我的判断:从微盟36小时故障,谈谈数据安全这点事。 很明...

潘永斌
04/01
13
0
收住你的下巴!第一人称视角宛如外星科技的自动化伐木!

声明:图片、视频均来自网络,若有侵权请联系处理 喜欢就点赞,随手转发 END 获取更多机械电子资讯 扫码关注 微信公众号:机电狂人 搜索关注 微博:机电狂人531 本文分享自微信公众号 - 工科...

工科生日常
2018/06/10
12
0
matlab教程:Matlab入门教程

  1、适当了解一些数值计算、数值分析以及最优化的理论   用Matlab的无非是做数值计算或者最优化,这也是Matlab的强项,Matlab有足够多的工具箱解决这些问题。但是在使用这些工具箱之前,...

SXXpenguin
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部