投稿
  1. Web176教程首页
  2. Canvas教程

Canvas 画布真实像素

terry • • Canvas教程 • 阅读 369

到目前为止，我们尚未深入了解 Canvas 画布真实像素的原理，事实上，你可以直接通过 ImageData 对象操纵像素数据，直接读取或将数据数组写入该对象中。稍后我们也将深入了解如何控制图像使其平滑（反锯齿）以及如何从 Canvas 画布中保存图像。

ImageData 对象

ImageData对象中存储着 canvas 对象真实的像素数据，它包含以下几个只读属性：

width

图片宽度，单位是像素

height

图片高度，单位是像素

data

Uint8ClampedArray 类型的一维数组，包含着 RGBA 格式的整型数据，范围在 0 至 255 之间（包括 255）。

data 属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用 4 个 1bytes 值 (按照红，绿，蓝和透明值的顺序; 这就是”RGBA”格式) 来代表。每个颜色值部份用 0 至 255 来代表。每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引 0 位置。像素从左到右被处理，然后往下，遍历整个数组。

Uint8ClampedArray 包含高度 × 宽度 × 4 bytes 数据，索引值从 0 到 (高度× 宽度 ×4)-1

例如，要读取图片中位于第 50 行，第 200 列的像素的蓝色部份，你会写以下代码：

blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];

根据行、列读取某像素点的 R/G/B/A 值的公式：

imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 0/1/2/3];

你可能用会使用 Uint8ClampedArray.length 属性来读取像素数组的大小（以 bytes 为单位）：

var numBytes = imageData.data.length;

创建一个 ImageData 对象

去创建一个新的，空白的 ImageData对象，你应该会使用createImageData() 方法。有 2 个版本的 createImageData() 方法。

var myImageData = ctx.createImageData(width, height);

上面代码创建了一个新的具体特定尺寸的 ImageData对象。所有像素被预设为透明黑。

你也可以创建一个被 anotherImageData对象指定的相同像素的 ImageData对象。这个新的对象像素全部被预设为透明黑。这个并非复制了图片数据。

var myImageData = ctx.createImageData(anotherImageData);

得到场景像素数据

为了获得一个包含画布场景像素数据的 ImageData 对像，你可以用 getImageData() 方法：

var myImageData = ctx.getImageData(left, top, width, height);

这个方法会返回一个 ImageData对象，它代表了画布区域的对象数据，此画布的四个角落分别表示为 (left, top), (left + width, top), (left, top + height), 以及 (left + width, top + height) 四个点。这些坐标点被设定为画布坐标空间元素。

备注： 任何在画布以外的元素都会被返回成一个透明黑的 ImageData 对像。

颜色选择器

在这个例子里面，我们会使用getImageData()去展示鼠标光标下的颜色。为此，我们要当前鼠标的位置，记为 layerX 和 layerY，然后我们去查询getImageData()给我们提供的在那个位置的像数数组里面的像素数据。最后我们使用数组数据去设置背景颜色和<div>的文字去展示颜色值。

var img = new Image();
img.crossOrigin = 'anonymous';
img.src = '/wp-content/uploads/2019/10/css3-1.jpg';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
};
var hoveredColor = document.getElementById('hovered-color');
var selectedColor = document.getElementById('selected-color');


function pick(event, destination) {
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1);
  var data = pixel.data;

    const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
    destination.style.background = rgba;
    destination.textContent = rgba;

    return rgba;
}

canvas.addEventListener('mousemove', function(event) {
    pick(event, hoveredColor);
});
canvas.addEventListener('click', function(event) {
    pick(event, selectedColor);
});

看看DEMO效果：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Color picker | Canvas pixel manipulation</title>

    <style>
      .color-cell {
        color: white;
        text-align: center;
      }
      th {
        width: 150px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Source</th>
          <th>Hovered color</th>
          <th>Selected color</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <canvas id="canvas" width="300" height="227"></canvas>
          </td>
          <td class="color-cell" id="hovered-color"></td>
          <td class="color-cell" id="selected-color"></td>
        </tr>
      </tbody>
    </table>
    <script>
      const img = new Image();
      img.crossOrigin = 'anonymous';
      img.src = '/wp-content/uploads/2019/10/css3-1.jpg';
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      img.addEventListener('load', () => {
        ctx.drawImage(img, 0, 0);
        img.style.display = 'none';
      });
      const hoveredColor = document.getElementById('hovered-color');
      const selectedColor = document.getElementById('selected-color');


      function pick(event, destination) {
        const bounding = canvas.getBoundingClientRect();
        const x = event.clientX - bounding.left;
        const y = event.clientY - bounding.top;
        const pixel = ctx.getImageData(x, y, 1, 1);
        const data = pixel.data;

        const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
        destination.style.background = rgba;
        destination.textContent = rgba;

        return rgba;
      }

      canvas.addEventListener('mousemove', event => pick(event, hoveredColor));
      canvas.addEventListener('click', event => pick(event, selectedColor));

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

在场景中写入像素数据

你可以用 putImageData() 方法去对场景进行像素数据的写入。

ctx.putImageData(myImageData, dx, dy);

dx 和 dy 参数表示你希望在场景内左上角绘制的像素数据所得到的设备坐标。

例如，为了在场景内左上角绘制 myImageData 代表的图片，你可以写如下的代码：

ctx.putImageData(myImageData, 0, 0);

图片灰度和反相颜色

在这个例子里，我们遍历所有像素以改变他们的数值。然后我们将被修改的像素数组通过 putImageData() 放回到画布中去。invert 函数仅仅是去减掉颜色的最大色值 255.grayscale 函数仅仅是用红绿和蓝的平均值。你也可以用加权平均，例如 x = 0.299r + 0.587g + 0.114b 这个公式。。更多资料请参考维基百科的Grayscale。

var img = new Image();
img.crossOrigin = 'anonymous';
img.src = '/wp-content/uploads/2019/10/css3-1.jpg';

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

img.onload = function() {
    ctx.drawImage(img, 0, 0);
};

var original = function() {
    ctx.drawImage(img, 0, 0);
};

var invert = function() {
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (var i = 0; i < data.length; i += 4) {
        data[i]     = 255 - data[i];     // red
        data[i + 1] = 255 - data[i + 1]; // green
        data[i + 2] = 255 - data[i + 2]; // blue
    }
    ctx.putImageData(imageData, 0, 0);
};

var grayscale = function() {
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (var i = 0; i < data.length; i += 4) {
        var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i]     = avg; // red
        data[i + 1] = avg; // green
        data[i + 2] = avg; // blue
    }
    ctx.putImageData(imageData, 0, 0);
};

const inputs = document.querySelectorAll('[name=color]');
for (const input of inputs) {
    input.addEventListener("change", function(evt) {
        switch (evt.target.value) {
            case "inverted":
                return invert();
            case "grayscale":
                return grayscale();
            default:
                return original();
        }
    });
}

看个DEMO：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Grayscaling and inverting color | Canvas pixel manipulation</title>
  </head>
  <body>
    <canvas id="canvas" width="300" height="227"></canvas>
    <form>
			<input type="radio" id="original" name="color" value="original" checked>
  		<label for="original">Original</label>

			<input type="radio" id="grayscale" name="color" value="grayscale">
  		<label for="grayscale">Grayscale</label>

			<input type="radio" id="inverted" name="color" value="inverted">
      <label for="inverted">Inverted</label>
      
      <input type="radio" id="sepia" name="color" value="sepia">
  		<label for="sepia">Sepia</label>
    </form>
	<script> 
      var img = new Image();
      img.crossOrigin = 'anonymous';
      img.src = '/wp-content/uploads/2019/10/css3-1.jpg';

      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      img.onload = function() {
          ctx.drawImage(img, 0, 0);
      };

      var original = function() {
          ctx.drawImage(img, 0, 0);
      };

      var sepia = function() {
          ctx.drawImage(img, 0, 0);
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          const data = imageData.data;
          for (var i = 0; i < data.length; i += 4) {
              let red = data[i], green = data[i + 1], blue = data[i + 2];

              data[i] = Math.min(Math.round(0.393 * red + 0.769 * green + 0.189 * blue), 255);
              data[i + 1] = Math.min(Math.round(0.349 * red + 0.686 * green + 0.168 * blue), 255);
              data[i + 2] = Math.min(Math.round(0.272 * red + 0.534 * green + 0.131 * blue), 255);
          }
          ctx.putImageData(imageData, 0, 0);
      }

      var invert = function() {
          ctx.drawImage(img, 0, 0);
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          const data = imageData.data;
          for (var i = 0; i < data.length; i += 4) {
              data[i]     = 255 - data[i];     // red
              data[i + 1] = 255 - data[i + 1]; // green
              data[i + 2] = 255 - data[i + 2]; // blue
          }
          ctx.putImageData(imageData, 0, 0);
      };

      var grayscale = function() {
          ctx.drawImage(img, 0, 0);
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          const data = imageData.data;
          for (var i = 0; i < data.length; i += 4) {
              var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
              data[i]     = avg; // red
              data[i + 1] = avg; // green
              data[i + 2] = avg; // blue
          }
          ctx.putImageData(imageData, 0, 0);
      };

      const inputs = document.querySelectorAll('[name=color]');
      for (const input of inputs) {
          input.addEventListener("change", function(evt) {
              switch (evt.target.value) {
                  case "inverted":
                      return invert();
                  case "grayscale":
                      return grayscale();
                  case "sepia":
                      return sepia();
                  default:
                      return original();
              }
          });
      }

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

缩放和反锯齿

在drawImage() 方法，第二个画布和imageSmoothingEnabled 属性的帮助下，我们可以放大显示我们的图片及看到详情内容。

我们得到鼠标的位置并裁剪出距左和上 5 像素，距右和下 5 像素的图片。然后我们将这幅图复制到另一个画布然后将图片调整到我们想要的大小。在缩放画布里，我们将 10×10 像素的对原画布的裁剪调整为 200×200。

zoomctx.drawImage(canvas,
                  Math.abs(x - 5), Math.abs(y - 5),
                  10, 10, 0, 0, 200, 200);

因为反锯齿默认是启用的，我们可能想要关闭它以看到清楚的像素。你可以通过切换勾选框来看到 imageSmoothingEnabled 属性的效果（不同浏览器需要不同前缀）。

Zoom example

<canvas id="canvas" width="300" height="227"></canvas>
<canvas id="zoom" width="300" height="227"></canvas>
<div>
<label for="smoothbtn">
  <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn">
  Enable image smoothing
</label>
</div>

var img = new Image();
img.src = 'rhino.jpg';
img.onload = function() {
  draw(this);
};

function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var zoomctx = document.getElementById('zoom').getContext('2d');

  var smoothbtn = document.getElementById('smoothbtn');
  var toggleSmoothing = function(event) {
    zoomctx.imageSmoothingEnabled = this.checked;
    zoomctx.mozImageSmoothingEnabled = this.checked;
    zoomctx.webkitImageSmoothingEnabled = this.checked;
    zoomctx.msImageSmoothingEnabled = this.checked;
  };
  smoothbtn.addEventListener('change', toggleSmoothing);

  var zoom = function(event) {
    var x = event.layerX;
    var y = event.layerY;
    zoomctx.drawImage(canvas,
                      Math.abs(x - 5),
                      Math.abs(y - 5),
                      10, 10,
                      0, 0,
                      200, 200);
  };

  canvas.addEventListener('mousemove', zoom);
}

看下DEMO：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="robots" content="noindex, nofollow">
        <style>
            body {
              padding: 0;
              margin: 0;
            }

            svg:not(:root) {
              display: block;
            }

            .playable-code {
              background-color: #f4f7f8;
              border: none;
              border-left: 6px solid #558abb;
              border-width: medium medium medium 6px;
              color: #4d4e53;
              height: 100px;
              width: 90%;
              padding: 10px 10px 0;
            }

            .playable-canvas {
              border: 1px solid #4d4e53;
              border-radius: 2px;
            }

            .playable-buttons {
              text-align: right;
              width: 90%;
              padding: 5px 10px 5px 26px;
            }
        </style>
        
        <title>像素操作 - zoom_example - code sample</title>
        
    </head>
    <body>
        
            <canvas id="canvas" width="300" height="227"></canvas>
<canvas id="zoom" width="300" height="227"></canvas>
<div>
<label for="smoothbtn">
  <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn">
  Enable image smoothing
</label>
</div>

        
        
<script>
var img = new Image();
img.src = '/wp-content/uploads/2019/10/css3-1.jpg';
img.onload = function() {
  draw(this);
};

function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var zoomctx = document.getElementById('zoom').getContext('2d');

  var smoothbtn = document.getElementById('smoothbtn');
  var toggleSmoothing = function(event) {
    zoomctx.imageSmoothingEnabled = this.checked;
    zoomctx.mozImageSmoothingEnabled = this.checked;
    zoomctx.webkitImageSmoothingEnabled = this.checked;
    zoomctx.msImageSmoothingEnabled = this.checked;
  };
  smoothbtn.addEventListener('change', toggleSmoothing);

  var zoom = function(event) {
    var x = event.layerX;
    var y = event.layerY;
    zoomctx.drawImage(canvas,
                      Math.abs(x - 5),
                      Math.abs(y - 5),
                      10, 10,
                      0, 0,
                      200, 200);
  };

  canvas.addEventListener('mousemove', zoom);
}

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

HTMLCanvasElement 提供一个 toDataURL() 方法，此方法在保存图片的时候非常有用。它返回一个包含被类型参数规定的图像表现格式的数据链接。返回的图片分辨率是 96dpi。

保存图片

canvas.toDataURL('image/png')

默认设定。创建一个 PNG 图片。

canvas.toDataURL('image/jpeg', quality)

创建一个 JPG 图片。你可以有选择地提供从 0 到 1 的品质量，1 表示最好品质，0 基本不被辨析但有比较小的文件大小。

当你从画布中生成了一个数据链接，例如，你可以将它用于任何<image>元素，或者将它放在一个有 download 属性的超链接里用于保存到本地。

你也可以从画布中创建一个Blob对像。

canvas.toBlob(callback, type, encoderOptions)

这个创建了一个在画布中的代表图片的 Blob 对像。

作者：terry，如若转载，请注明出处：https://www.web176.com/canvas/7607.html

赞 (0)
打赏 支付宝 支付宝 微信 微信
terryterry
0 0
上一篇 2022年12月22日 下午2:54
下一篇 2022年12月22日 下午3:38

相关推荐

发表回复

登录后才能评论