[英]JS: “Uncaught TypeError: Type error” when trying to use putImageData
我正在尝试编写一个非常简单的图像操纵器。 我的第一个功能是对图像进行灰度处理。
HTML:
<body onload="loadImage()">
<div id="canvascontainer">
<h1>WTSP - Way Too Simple Photoshop</h1>
<canvas id="wtspcanvas">
Sorry, selbst für das zu simple Photoshop ist dein Browser zu simpel. <!-- Fallback -->
</canvas>
<p><input type="button" value="In Graustufen konvertieren" onclick="greyScale()" /></p>
</div>
JS:
function loadImage() {
_canvas = document.getElementById("wtspcanvas"); // Canvas anwählen
var bildObj = new Image(); // Bildobjekt anlegen
bildObj.onload = function() {
showImage(bildObj, _canvas); // Bild und Canvas an showImage weitergeben
};
bildObj.src = "img/wtsp.png";
return bildObj;
}
function showImage(bildObj, canvas) {
_canvasWidth = bildObj.naturalWidth; // Höhe und Breite des Bildes holen
_canvasHeight = bildObj.naturalHeight; // In Variable speichern für später
canvas.width = _canvasWidth; // Höhe und Breite des Canvas entsprechend setzen
canvas.height = _canvasHeight;
var context = _canvas.getContext("2d"); // 2-dimensionalen Kontext setzen, global
context.drawImage(bildObj, 0, 0); // Bild in der oberen linken Ecke zeichnen
_pixel = context.getImageData(0, 0, _canvasWidth, _canvasHeight); // Bilddaten in globaler Variable speichern
}
function greyScale() {
var context = _canvas.getContext("2d");
var bildDaten = context.getImageData(0, 0, _canvasWidth, _canvasHeight);
for(var i = 0; i < bildDaten.length; i += 4) {
bildDaten.data[i] = bildDaten.data[i]*0.299;
bildDaten.data[i + 1] = bildDaten.data[i + 1]*0.587;
bildDaten.data[i + 2] = bildDaten.data[i + 2]*0.114;
// bildDaten.data[i + 3] = 1;
}
context.putImageData(bildDaten.data, 0, 0, _canvasWidth, _canvasHeight);
}
错误发生在greyScale的最后一行。 Chrome的JS控制台弹出:
[Error] TypeError: Type error
greyScale (manipulator.js, line 28)
onclick (index.html, line 21)
我绝不是JS专家,所以我的代码可能不是最干净的。 谁能为我指出正确的方向,以消除错误并使函数正常工作?
.putImageData()
期望将ImageData
对象作为第一个参数-由.getImageData()
获得
所以你必须改变最后一行
context.putImageData(bildDaten.data, 0, 0, _canvasWidth, _canvasHeight);
至
context.putImageData(bildDaten, 0, 0, _canvasWidth, _canvasHeight);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.