标签：const img ctx 水印 js width 马赛克 imgDate

JavaScript给图片添加水印及马赛克

• 基于react-hooks封装图片水印和马赛克的方法
• 实际调用
• 效果图展示

基于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=''/>

效果图展示

标签：const,img,ctx,水印,js,width,马赛克,imgDate
来源： https://blog.csdn.net/zeal_Y/article/details/107015914

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。