Comment utiliser ImageData de Canvas

Nous avons déjà publié de nombreux articles sur la toile. Si vous êtes intéressé, vous pouvez y jeter un œil. L'un d'eux concerne la vidéo de dessin sur toile. Venez aujourd'hui Présentation de l'application de l'objet ImageDate de camvas.

Objet ImageData du canevas

L'objet ImageData stocke les données de pixels réelles de l'objet canevas. Il contient les attributs en lecture seule suivants :

largeur

Largeur de l'image, l'unité est en pixels

hauteur

Hauteur de l'image, l'unité est en pixels

données

Type Uint8ClampedArray

Tableau unidimensionnel contient données entières au format RGBA, allant de 0 à 255 (255 inclus).

Créer un objet ImageData

Pour créer un nouvel objet ImageData vierge, vous devez utiliser la méthode createImageData().

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

Le code ci-dessus crée un nouvel objet ImageData d'une taille spécifique. Tous les pixels sont prédéfinis en noir transparent.

Obtenir les données des pixels de la scène

Afin d'obtenir un objet ImageData contenant les données des pixels de la scène du canevas, vous pouvez utiliser la méthode getImageData() :

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

Cette méthode permettra return Un objet ImageData, qui représente les données d'objet de la zone du canevas. Les quatre coins du canevas sont représentés par (gauche, haut), (gauche + largeur, haut), (gauche, haut + hauteur) et (gauche + largeur, haut + hauteur) quatre points. Ces points de coordonnées sont définis en tant qu'éléments de l'espace de coordonnées du canevas.

Écrire des données de pixels dans la scène

Vous pouvez utiliser la méthode putImageData() pour écrire des données de pixels dans la scène.

ctx.putImageData(myImageData, dx, dy);

Les paramètres dx et dy représentent les coordonnées de l'appareil obtenues en dessinant des données de pixels dans le coin supérieur gauche de la scène.

Par exemple, afin de dessiner l'image représentée par myImageData dans le coin supérieur gauche de la scène, vous pouvez écrire le code suivant :

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

a l'élément

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

Application 2 : Filtrage d'arrière-plan de couleur unie de la vidéo

Aujourd'hui, nous utilisons getImageData pour filtrer l'arrière-plan de couleur unie.

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

Application 3 : Image en niveaux de gris et couleur inversée

Dans cet exemple, nous parcourons tous les pixels pour modifier leurs valeurs. Ensuite, nous remettons le tableau de pixels modifié dans le canevas via putImageData(). La fonction d'inversion soustrait simplement la valeur chromatique maximale de la couleur de 255. La fonction d'échelle de gris utilise simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, telle que la formule 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);
}

Appliquer un zoom à quatre et un anti-aliasing

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

Appliquer un dessin à la main sur cinq toiles et télécharger l'image

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

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment créer l'effet de chargement de CSS3

Comment créer avec effet d'icône CSS3

Comment convertir l'encodage CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!