前言：
现时大家对“css图片马赛克”大体比较重视，你们都需要剖析一些“css图片马赛克”的相关资讯。那么小编也在网上收集了一些对于“css图片马赛克””的相关文章，希望你们能喜欢，各位老铁们快快来了解一下吧！1.canvas图片马赛克原理及区间解析
*每一个mosaic马赛克矩形坐标(i,j)
* x=i y=j
* mosaic马赛克(0,0)–>纵代表:(0,0) (4,4) -->随机生成像素点区间[0-4] [0-4]
* mosaic马赛克(1,0)–>纵向代表：(5,0) (9,4) -->随机生成像素点区间[5-9] [0-4]
* mosaic马赛克(0,0)–>横代表：(0,0) (4,4) -->随机生成像素点区间[0-4] [0-4]
* mosaic马赛克(0,1)–>横向代表：(0,5) (4,9) -->随机生成像素点区间[0-4] [5-9]
* mosaic马赛克(1,1)–>纵横项：(5,5) (9,9) -->随机生成像素点区间[5-9] [9-9]
canvas
2.效果图
canvas
3.less
* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position，会影响画布的坐标定位 left: 0; top: 0; right: 0; bottom: 0; margin: 5% auto; font: 20px "微软雅黑"; text-align: center; color: white; transition: 2s; &:hover { background: steelblue; } h1 { margin-top: 8%; } h2 { margin-left: 30%; margin-top: 100%; } #wrap-canvas { position: absolute; background: lightgoldenrodyellow; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } }}123456789101112131415161718192021222324252627282930313233343536373839404.js$(function(){ var canvasNode=document.querySelector("#wrap-canvas"); if(canvasNode.getContext){ var canvasPen=canvasNode.getContext("2d"); var img=new Image(); img.src="img/logo300-1.png"; img.onload=function(){ //画布高宽 canvasNode.width=img.width*2; canvasNode.height=img.height*1.3; //开始绘制 imgDraw(); } } function imgDraw(){ canvasPen.drawImage(img,0,30); //1.处理原始图片 var originImg=canvasPen.getImageData(0,0,img.width,img.height); var newImg=canvasPen.createImageData(img.width,img.height); //2.马赛克mosaic //2.1选取一个马赛克矩形 var mosaicSize=5; //2.2从矩形中随机抽出一个像素点data-rgba //横向坐标 for(var i=0;i<originImg.width/mosaicSize;i++){ //纵向坐标 for(var j=0;j<originImg.height/mosaicSize;j++){ /*每一个mosaic马赛克矩形坐标(i,j) * x=i y=j * mosaic马赛克(0,0)-->纵代表:(0,0) (4,4) -->随机生成像素点区间[0-4] [0-4] * mosaic马赛克(1,0)-->纵向代表：(5,0) (9,4) -->随机生成像素点区间[5-9] [0-4] * mosaic马赛克(0,0)-->横代表：(0,0) (4,4) -->随机生成像素点区间[0-4] [0-4] * mosaic马赛克(0,1)-->横向代表：(0,5) (4,9) -->随机生成像素点区间[0-4] [5-9] * mosaic马赛克(1,1)-->纵横项：(5,5) (9,9) -->随机生成像素点区间[5-9] [9-9] */ /* Math.random -->返回[0-1)：包括0，但不包括1 * 开区间(a,b) : a和b之间，不包括a、b * 闭区间[a,b] : a和b之间，包括a、b * Math.random()*mosaicSize=[0,5] * 1个像素的mosaic：并且需要向下取整Math.floor(Math.random()*mosaicSize)=[0,5)-->[0-4] */ var originColor=getPixelColor( originImg, i*mosaicSize+Math.floor(Math.random()*mosaicSize),//横坐标循环[5-9] j*mosaicSize+Math.floor(Math.random()*mosaicSize));//纵坐标循环[9-9] //2.3将矩形中的全部像素点，全部调整为随机抽出的mosaic马赛克像素点 //这里完成第1个像素的mosaic马赛克模糊mosaicX、mosaicY for(var mosaicX=0;mosaicX<mosaicSize;mosaicX++){ for(var mosaicY=0;mosaicY<mosaicSize;mosaicY++){ //轮循每一个像素点:mosaicX，加入随机点i*mosaicSize+mosaicX setPixelColor(newImg,i*mosaicSize+mosaicX,j*mosaicSize+mosaicY,originColor); } } } } /*for(var i=0;i<newImg.data.length;i++){ //测试图片填充 newImg.data[4*i+3]=255; }*/ /* 3.生成图片，在put时，定义图片位置 * utImageData(imgData,x,y) 写入像素数据 * x/y：let、top坐标，默认左上角 */ //生成之前清理画布,put之前clear可以生成新的马赛克图片，但是会连同原始图片一同清理 //canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height); //3.1生成新的马赛克图片 canvasPen.putImageData(newImg,img.width,30); //3.2覆盖原始图+马赛克 //canvasPen.putImageData(newImg,0,30); } //4.获取图像颜色 function getPixelColor(img,x,y){ var pixelColor=[]; var pixelData=img.data; var pixelWidth=img.width; //获取颜色偏移量位置：column(y)*width(w)+row(x) //r pixelColor[0]=pixelData[(y*pixelWidth+x)*4]; //g pixelColor[1]=pixelData[(y*pixelWidth+x)*4+1]; //b pixelColor[2]=pixelData[(y*pixelWidth+x)*4+2]; //a pixelColor[3]=pixelData[(y*pixelWidth+x)*4+3]; return pixelColor; } //5.设置像素颜色 function setPixelColor(img,x,y,pixelColor){ var pixelData=img.data; var pixelWidth=img.width; pixelData[(y*pixelWidth+x)*4]=pixelColor[0]; pixelData[(y*pixelWidth+x)*4+1]=pixelColor[1]; pixelData[(y*pixelWidth+x)*4+2]=pixelColor[2]; pixelData[(y*pixelWidth+x)*4+3]=pixelColor[3]; }})1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061075.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>canvas-图片马赛克mosaic</title> </head> <link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" href="css/17-canvas-mosaic-pic.css" /> <body> <div id="wrap"> <h1>canvas图片-马赛克mosaic</h1> <canvas id="wrap-canvas"></canvas> <h2>PS：一刀coder</h2> </div> </body> <script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script> <script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/17-canvas-mosaic-pic.js"></script></html>
canvas
canvas
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css图片马赛克
