So verwenden Sie ImageData von Canvas

Wir haben schon viele Artikel über Leinwand geschrieben. Wenn Sie interessiert sind, können Sie einen Blick auf das Zeichenvideo auf Leinwand werfen. Kommen Sie noch heute hierher und stellen Sie die Anwendung des ImageDate-Objekts von Camvas vor.

ImageData-Objekt des Canvas

Das ImageData-Objekt speichert die echten Pixeldaten des Canvas-Objekts. Es enthält die folgenden schreibgeschützten Attribute:

width

Bildbreite, die Einheit ist Pixel

Höhe

Bildhöhe, die Einheit ist Pixel

Daten

Uint8ClampedArray-Typ Eindimensionales Array enthält ganzzahlige Daten im RGBA-Format im Bereich von 0 bis 255 (einschließlich 255).

Erstellen Sie ein ImageData-Objekt

Um ein neues, leeres ImageData-Objekt zu erstellen, sollten Sie die Methode createImageData() verwenden.

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

Der obige Code erstellt ein neues ImageData-Objekt einer bestimmten Größe. Alle Pixel sind auf transparentes Schwarz voreingestellt.

Szenen-Pixeldaten abrufen

Um ein ImageData-Objekt mit Canvas-Szenen-Pixeldaten zu erhalten, können Sie die Methode getImageData() verwenden:

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

Diese Methode wird return Ein ImageData-Objekt, das die Objektdaten des Leinwandbereichs darstellt. Die vier Ecken der Leinwand werden durch (links, oben), (links + Breite, oben), (links, oben + Höhe) und (links +) dargestellt Breite, Oberseite + Höhe) vier Punkte. Diese Koordinatenpunkte werden als Canvas-Koordinatenraumelemente festgelegt.

Pixeldaten in die Szene schreiben

Sie können die Methode putImageData() verwenden, um Pixeldaten in die Szene zu schreiben.

ctx.putImageData(myImageData, dx, dy);

Die Parameter dx und dy stellen die Gerätekoordinaten dar, die durch Zeichnen von Pixeldaten in der oberen linken Ecke der Szene erhalten werden.

Um beispielsweise das durch myImageData dargestellte Bild in der oberen linken Ecke der Szene zu zeichnen, können Sie den folgenden Code schreiben:

ctx.putImageData(myImageData, 0, 0);
toDataURL 将canvas转为 data URI格式

hat das folgende 5ba626b379994d53f7acf72a64f9b697-Element

<canvas id="canvas" width="5" height="5"></canvas>
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
应用一：颜色选择器
var img = new Image();
img.src = &#39;haorooms.jpg&#39;;
var canvas = document.getElementById(&#39;canvas&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = &#39;none&#39;;
};
var color = document.getElementById(&#39;color&#39;);
function pick(event) {
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1);
  var data = pixel.data;
  console.log(data);
  var rgba = &#39;rgba(&#39; + data[0] + &#39;,&#39; + data[1] +
             &#39;,&#39; + data[2] + &#39;,&#39; + (data[3] / 255) + &#39;)&#39;;
  color.style.background =  rgba;
  color.textContent = rgba;
}
canvas.addEventListener(&#39;mousemove&#39;, pick);

Anwendung 2: Video-Vollfarbhintergrundfilterung

Heute verwenden wir getImageData, um den Volltonhintergrund herauszufiltern.

let processor = {
  timerCallback: function() {
    if (this.video.paused || this.video.ended) {
      return;
    }
    this.computeFrame();
    let self = this;
    setTimeout(function () {
        self.timerCallback();
      }, 0);
  },
  doLoad: function() {
    this.video = document.getElementById("video");
    this.c1 = document.getElementById("c1");
    this.ctx1 = this.c1.getContext("2d");
    this.c2 = document.getElementById("c2");
    this.ctx2 = this.c2.getContext("2d");
    let self = this;
    this.video.addEventListener("play", function() {
        self.width = self.video.videoWidth / 2;
        self.height = self.video.videoHeight / 2;
        self.timerCallback();
      }, false);
  },
  computeFrame: function() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
        let l = frame.data.length / 4;
    for (let i = 0; i < l; i++) {
      let r = frame.data[i * 4 + 0];
      let g = frame.data[i * 4 + 1];
      let b = frame.data[i * 4 + 2];
      if (g > 100 && r > 100 && b < 43)
        frame.data[i * 4 + 3] = 0;
    }
    this.ctx2.putImageData(frame, 0, 0);
    return;
  }
};

Anwendung 3: Bildgraustufen und invertierte Farbe

In diesem Beispiel durchlaufen wir alle Pixel, um ihre Werte zu ändern. Dann fügen wir das geänderte Pixelarray über putImageData() wieder in die Leinwand ein. Die Umkehrfunktion subtrahiert lediglich den maximalen Farbwert der Farbe um 255. Die Graustufenfunktion verwendet lediglich den Durchschnitt von Rot, Grün und Blau. Sie können auch einen gewichteten Durchschnitt verwenden, beispielsweise die Formel x = 0,299r + 0,587g + 0,114b.

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]     = 225 - data[i];     // red
      data[i + 1] = 225 - data[i + 1]; // green
      data[i + 2] = 225 - 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(&#39;invertbtn&#39;);
  invertbtn.addEventListener(&#39;click&#39;, invert);
  var grayscalebtn = document.getElementById(&#39;grayscalebtn&#39;);
  grayscalebtn.addEventListener(&#39;click&#39;, grayscale);
}

Vier-Zoom und Anti-Aliasing anwenden

var img = new Image();
img.src = 'haorooms.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);
}

Fünf-Leinwand-Handzeichnung anwenden und das Bild herunterladen

window.addEventListener('load', function(ev) {
    var sourceimage = document.querySelector('img');
    var canvas = document.querySelector('canvas');
    var link = document.querySelector('a');
    var context = canvas.getContext('2d');
    var mouseX = 0, mouseY = 0,
        width = 300, height = 300,
        mousedown = false;
    canvas.width = width;
    canvas.height = height;
    context.fillStyle = 'hotpink'; 
    function draw(ev) {
      if (mousedown) {
        var x = ev.layerX;
        var y = ev.layerY;
        x = (Math.ceil(x / 10) * 10) - 10;
        y = (Math.ceil(y / 5) * 5) - 5;
        context.fillRect(x, y, 10, 5);
      }
    }
    var link = document.createElement('a');
        link.innerHTML = '下载图片';
        link.href = "#";
        link.download = "haorooms.png";
    document.body.insertBefore(link, canvas);
    canvas.addEventListener('mouseover', function(ev) {
      document.body.classList.add('painted');
    }, false);
    canvas.addEventListener('mousemove', draw, false);
    canvas.addEventListener('mousedown', function(ev) {
      mousedown = true;
    }, false );
    canvas.addEventListener('mouseup', function(ev) {
      link.href = canvas.toDataURL();
      mousedown = false;
    }, false );
  } ,false);

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man den Ladeeffekt von CSS3 macht

Wie man macht es mit CSS3-Symboleffekt

So konvertieren Sie die CSS-Kodierung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ImageData von Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!