JS: «Невозможно TypeError: введите ошибку» при попытке использовать putImageData

Я пытаюсь запрограммировать очень простой манипулятор изображения. Моя первая функция - полутоновое изображение.JS: «Невозможно TypeError: введите ошибку» при попытке использовать 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. JS консоль Хрома выплевывает:

[Error] TypeError: Type error 
    greyScale (manipulator.js, line 28) 
    onclick (index.html, line 21)

Я ни в коем случае не JS-эксперт, так что мой код не может быть чистым. Может ли кто-нибудь указать мне в правильном направлении, как избавиться от ошибки и заставить функцию работать?

источник

2014-01-20 hombrus

.putImageData() ожидает ImageData объекта в качестве первого параметра, - как получается .getImageData()

Таким образом, вы должны изменить последнюю строку из

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

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

источник

2014-01-20 14:27:33 Andreas

Это, по крайней мере, избавляется ошибки. Однако после нажатия кнопки холст не изменяется вообще. Есть ли еще один шаг, необходимый для фактического отображения вновь вычисленных пикселей? – hombrus

Хорошо, я понял. 'bildDaten.length' - неопределенное значение. Заменили его '_canvasWidth * _canvasHeight * 4' – hombrus

или' bildDaten.data.length' – Andreas

JS: «Невозможно TypeError: введите ошибку» при попытке использовать putImageData

ответ

Смежные вопросы