Question

我正在尝试编写一个非常简单的图像操纵器。我的第一个功能是对图像进行灰度。

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专家，所以我的代码可能不是最干净的。任何人都可以指出我正确的方向如何摆脱错误并使功能工作？

Answer 1

.putImageData()期望将ImageData个对象作为第一个参数 - 由.getImageData()获得

所以你必须改变

的最后一行

context.putImageData(bildDaten.data, 0, 0, _canvasWidth, _canvasHeight);

到

context.putImageData(bildDaten, 0, 0, _canvasWidth, _canvasHeight);

JS：尝试使用putImageData时出现“Uncaught TypeError：Type error”

1 个答案: