HTML5 Canvas 学习日志（十二）

最新推荐文章于 2025-09-10 17:59:49 发布

weixin_33842328

最新推荐文章于 2025-09-10 17:59:49 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/yuewawa/blog/609913

本文介绍如何使用HTML5Canvas实现图片像素化的技术，通过绘制图像、获取像素数据并重新组织来实现像素化效果。此教程适合前端开发者深入理解Canvas API并应用于图像处理场景。

2019独角兽企业重金招聘Python工程师标准>>>

HTML5 Canvas 学习日志（十二）
图片像素化

<script type="text/javascript"> $(document).ready(function(){ var canvas = $("#mycanvas"); var context = canvas.get(0).getContext("2d"); var image = new Image(); image.src = "face.png"; $(image).load(function(){ context.drawImage(image, 0, 0, 500, 500); var imageData = context.getImageData(0, 0, canvas.width(), canvas.height()); var pixels = imageData.data; context.clearRect(0, 0, canvas.width(), canvas.height()); var numTileRows = 50; var numTileCols = 50; var tileWidth = imageData.width/numTileCols; var tileHeight = imageData.height/numTileRows; for (var r=0; r<numTileRows; r++){ for (var c=0; c<numTileCols; c++){ var x = (c*tileWidth)+(tileWidth/2); var y = (r*tileHeight)+(tileHeight/2); var pos = (Math.floor(y)*(imageData.width*4))+(Math.floor(x)*4); var red = pixels[pos]; var green = pixels[pos+1]; var blue = pixels[pos+2]; context.fillStyle = "rgb("+red+", "+green+", "+blue+")"; //context.fillRect(x-(tileWidth/2), y-(tileHeight/2), tileWidth, tileHeight); context.beginPath(); context.arc(x, y, tileWidth/2, 0, Math.PI*2, false); context.closePath(); context.fill(); }; }; }); }); </script>

这里写图片描述