åç´ æä½

ImageData å¯¹è±¡

width: å¾çå®½åº¦ï¼åä½æ¯åç´
height: å¾çé«åº¦ï¼åä½æ¯åç´
data: Uint8ClampedArray ç±»åçä¸ç»´æ°ç»ï¼åå«ç RGBA æ ¼å¼çæ´åæ°æ®ï¼èå´å¨ 0 è³ 255 ä¹é´ï¼åæ¬ 255ï¼ã

Uint8ClampedArray åå« height Ã width Ã 4 åèæ°æ®ï¼ç´¢å¼å¼ä» 0 å° (heightÃ width Ã 4)-1

js

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

æ ¹æ®è¡ãåè¯»åæåç´ ç¹ç R/G/B/A å¼çå¬å¼ï¼

js

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

js

var numBytes = imageData.data.length;

åå»ºä¸ä¸ª ImageData å¯¹è±¡

å»åå»ºä¸ä¸ªæ°çï¼ç©ºç½ç ImageData å¯¹è±¡ï¼ä½ åºè¯¥ä¼ä½¿ç¨createImageData() æ¹æ³ãæ 2 ä¸ªçæ¬ç createImageData() æ¹æ³ã

js

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

js

var myImageData = ctx.createImageData(anotherImageData);

å¾å°åºæ¯åç´ æ°æ®

js

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

è¿ä¸ªæ¹æ³ä¼è¿åä¸ä¸ª ImageData å¯¹è±¡ï¼å®ä»£è¡¨äºç»å¸åºåçå¯¹è±¡æ°æ®ï¼æ¤ç»å¸çåä¸ªè§è½åå«è¡¨ç¤ºä¸º (left, top), (left + width, top), (left, top + height), ä»¥å (left + width, top + height) åä¸ªç¹ãè¿äºåæ ç¹è¢«è®¾å®ä¸ºç»å¸åæ ç©ºé´åç´ ã

è¿ä¸ªæ¹æ³ä¹ä¼å¨æç« ç¨ç»å¸æä½è§é¢ä¸å±ç¤ºã

é¢è²éæ©å¨

<canvas id="canvas" width="300" height="227" style="float:left"></canvas>
<div id="color" style="width:200px;height:50px;float:left"></div>

var img = new Image();
img.src = "rhino.jpg";
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
img.onload = function () {
  ctx.drawImage(img, 0, 0);
  img.style.display = "none";
};
var color = document.getElementById("color");
function pick(event) {
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1);
  var data = pixel.data;
  var rgba =
    "rgba(" +
    data[0] +
    "," +
    data[1] +
    "," +
    data[2] +
    "," +
    data[3] / 255 +
    ")";
  color.style.background = rgba;
  color.textContent = rgba;
}
canvas.addEventListener("mousemove", pick);

js

var img = new Image();
img.crossOrigin = "anonymous";
img.src = "./assets/rhino.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);
});

å¨åºæ¯ä¸åå¥åç´ æ°æ®

js

ctx.putImageData(myImageData, dx, dy);

js

ctx.putImageData(myImageData, 0, 0);

å¾çç°åº¦ååç¸é¢è²

<canvas id="canvas" width="300" height="227"></canvas>
<div>
  <input id="grayscalebtn" value="Grayscale" type="button" />
  <input id="invertbtn" value="Invert" type="button" />
</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 imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;

  var invert = function () {
    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 () {
    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);
  };

  var invertbtn = document.getElementById("invertbtn");
  invertbtn.addEventListener("click", invert);
  var grayscalebtn = document.getElementById("grayscalebtn");
  grayscalebtn.addEventListener("click", grayscale);
}

js

var img = new Image();
img.crossOrigin = "anonymous";
img.src = "./assets/rhino.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();
    }
  });
}

ç¼©æ¾ååé¯é½¿

js

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

ç¼©æ¾ç¤ºä¾

html

<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>

js

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);
}

ä¿åå¾ç

canvas.toDataURL('image/png'): é»è®¤è®¾å®ãåå»ºä¸ä¸ª PNG å¾çã
canvas.toDataURL('image/jpeg', quality): åå»ºä¸ä¸ª JPG å¾çãä½ å¯ä»¥æéæ©å°æä¾ä» 0 å° 1 çåè´¨éï¼1 è¡¨ç¤ºæå¥½åè´¨ï¼0 åºæ¬ä¸è¢«è¾¨æä½ææ¯è¾å°çæä»¶å¤§å°ã

ä½ ä¹å¯ä»¥ä»ç»å¸åå»ºä¸ä¸ª Blob å¯¹è±¡ã

canvas.toBlob(callback, type, encoderOptions): è¿ä¸ªåå»ºäºä¸ä¸ªå¨ç»å¸ä¸çä»£è¡¨å¾çç Blob å¯¹è±¡ã

åè§

Help improve MDN

Learn how to contribute

View this page on GitHub â¢ Report a problem with this content

åç´ æä½

ç¼©æ¾ç¤ºä¾

Help improve MDN

ç¼©æ¾ç¤ºä¾