HTML5画布像素图像的焦点

最新推荐文章于 2024-03-05 16:56:07 发布

limeiyans

最新推荐文章于 2024-03-05 16:56:07 发布

阅读量747

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5画布像素图像的焦点文章标签： HTML5画布像素图像的焦点

本文链接：https://blog.youkuaiyun.com/limeiyans/article/details/18450053

HTML5画布像素图像的焦点专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用HTML5 Canvas实现图像像素化的技术，通过调整像素大小和迭代绘制过程，达到图像风格化的视觉效果。代码示例展示了如何在网页中动态加载图片并进行像素化处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感觉这个代码还真的是挺好的啊，这个是比较不错，大家直接看吧。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
      var pixelation = 40;

      function focusImage(context, imageObj, sourceWidth, sourceHeight, destX, destY) {
        var sourceX = destX;
        var sourceY = destY;

        var imageData = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
        var data = imageData.data;

        for(var y = 0; y < sourceHeight; y += pixelation) {
          for(var x = 0; x < sourceWidth; x += pixelation) {
            var red = data[((sourceWidth * y) + x) * 4];
            var green = data[((sourceWidth * y) + x) * 4 + 1];
            var blue = data[((sourceWidth * y) + x) * 4 + 2];

            for(var n = 0; n < pixelation; n++) {
              for(var m = 0; m < pixelation; m++) {
                if(x + m < sourceWidth) {
                  data[((sourceWidth * (y + n)) + (x + m)) * 4] = red;
                  data[((sourceWidth * (y + n)) + (x + m)) * 4 + 1] = green;
                  data[((sourceWidth * (y + n)) + (x + m)) * 4 + 2] = blue;
                }
              }
            }
          }
        }

        // overwrite original image
        context.putImageData(imageData, destX, destY);
        pixelation -= 1;
      }
      var fps = 20;
      // frames / second
      var timeInterval = 1000 / fps;
      // milliseconds
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var imageObj = new Image();
      imageObj.onload = function() {
        var sourceWidth = imageObj.width;
        var sourceHeight = imageObj.height;
        var destX = canvas.width / 2 - sourceWidth / 2;
        var destY = canvas.height / 2 - sourceHeight / 2;

        var intervalId = setInterval(function() {
          context.drawImage(imageObj, destX, destY);

          if(pixelation < 1) {
            clearInterval(intervalId);
          }
          else {
            focusImage(context, imageObj, sourceWidth, sourceHeight, destX, destY);
          }

        }, timeInterval);
      };

      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

    </script>
  </body>
</html>