当前位置:首页> 正文
javascript怎么给图片打马赛克?
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
整体逻辑:获取oldImg图片的像素信息,以5*5为单位,在5*5单位中取到一个随机像素并赋值给5*5中的所有像素点,加以循环,以实现马赛克效果。
实现代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: grey; text-align: center; } #myCanvas { background-color: rgba(250, 0, 0, 0.3); } </style> </head> <body> <canvas id="myCanvas" width="500" height="400"></canvas> </body> <script type="text/javascript"> window.onload = function() { var myCanvas = document.getElementById('myCanvas'); var painting = myCanvas.getContext('2d'); //生成一个图片节点 var imgNode = new Image(); imgNode.src = '1.webp'; //调用函数 drawImg(imgNode); function drawImg(imgNode) { //图片加载后执行马赛克实现语句:5个一组取到随机像素赋给新图里的五个一组 imgNode.onload = function() { painting.drawImage(imgNode, 0, 0, 250, 400); var size = 5; //获取老图所有像素点 var oldImg = painting.getImageData(0, 0, 250, 400) //创建新图像素对象 var newImg = painting.createImageData(250, 400) 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++) { // (a,b) setPxInfo(newImg, i * size + a, j * size + b, color); } } } } painting.putImageData(newImg, 250, 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]; } } </script> </html>
以上就是javascript怎么给图片打马赛克?的详细内容,更多请关注易知道|edz.cc其它相关文章!
展开全文阅读
相关内容
-
电脑网页打开页面不全怎么办|电脑网页打开后显
电脑网页打开页面不全怎么办|电脑网页打开后显示不全,,1. 电脑...
-
金蝶k3入如何设置公式|金蝶K3中计量单位该如何
金蝶k3入如何设置公式|金蝶K3中计量单位该如何设置呢?,,1.金蝶...
-
网页返回上一页快捷键|网页返回上一页的快捷键
网页返回上一页快捷键|网页返回上一页的快捷键,,网页返回上一...
-
计算机不能打开网页发送更多的数据包,但很少收到
计算机不能打开网页发送更多的数据包,但很少收到(解决方案)。,,问...
-
网页抓取电脑信息|电脑网页捕获
网页抓取电脑信息|电脑网页捕获,,1. 电脑网页捕获可以使用抓包...
-
电脑上不了qq和网页|电脑上qq有网,但是网页打不
电脑上不了qq和网页|电脑上qq有网,但是网页打不开,,电脑上qq有...
-
电脑网页内存高|电脑网页内存高怎么设置
电脑网页内存高|电脑网页内存高怎么设置,,1. 电脑网页内存高怎...
-
无法打开网络正常网页的解决方案
无法打开网络正常网页的解决方案,,昨天我在一家电脑公司做了一...
-
这种配置还不知道。它主要用于日常学习和娱乐,偶
这种配置还不知道。它主要用于日常学习和娱乐,偶尔玩游戏。,,CP...
-
小米电脑flash怎么打开图片不显示|小米网页不显
小米电脑flash怎么打开图片不显示|小米网页不显示图片怎么办...
-
手机连接电脑调试网页|手机连接电脑调试网页怎
手机连接电脑调试网页|手机连接电脑调试网页怎么弄,,手机连接...
-
打开网页快捷键|复制打开网页快捷键
打开网页快捷键|复制打开网页快捷键,,复制打开网页快捷键其实,...
-
如何在电脑中批量修改相片像素|如何在电脑中批
如何在电脑中批量修改相片像素|如何在电脑中批量修改相片像...
-
手机如何登录电脑网页|手机如何登录电脑网页账
手机如何登录电脑网页|手机如何登录电脑网页账号,,手机如何登...
-
月光博客声讨百度百科,百度文库侵权,不适用于避风
月光博客声讨百度百科,百度文库侵权,不适用于避风港原则。,,一年...