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
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
<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 = 'haorooms.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;
console.log(data);
var rgba = 'rgba(' + data[0] + ',' + data[1] +
',' + data[2] + ',' + (data[3] / 255) + ')';
color.style.background = rgba;
color.textContent = rgba;
}
canvas.addEventListener('mousemove', 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('invertbtn');
invertbtn.addEventListener('click', invert);
var grayscalebtn = document.getElementById('grayscalebtn');
grayscalebtn.addEventListener('click', 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!
