本文实例讲述了JS实现马赛克图片效果。分享给大家供大家参考,具体如下:
整体逻辑:获取oldImg图片的像素信息,以5*5为单位,在5*5单位中取到一个随机像素并赋值给5*5中的所有像素点,加以循环,以实现马赛克效果。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net JS图片马赛克</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.jpg'; //调用函数 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相关内容还可查看本站专题:《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]