Javascript - Помещение изображений на элемент холста - CanvasRenderingContext2D

Question

Я хочу взять исходное изображение и поместить его пиксельные данные в элемент с сеткой CanvasRenderingContext2D.

Я пишу яваскрипт функцию для работы с определенными точками пиксельных данных, , но я получаю сообщение об ошибке от этой линии:

ctx.putImageData(sourceImage, 0, 0); 

Вот мой текущий Javascript функции, которая принимает идентификатор класса из IMG элемент в качестве аргумента:

function mapMyImage(sourceImageID) { 

    // Declare variable for my source image 
    var sourceImage = document.getElementById(sourceImageID); 

    // Creates a canvas element in the HTML to hold the pixels 
    var canvas = document.createElement('canvas'); 

    // Create a 2D rendering context for our canvas 
    var ctx = canvas.getContext('2d'); 

    // After the image has loaded, put the source image data into the 
    // 2D rendering context grid 
    function imgToPixelArray() { 
    // In the context of the canvas, make an array of pixels 
    ctx.putImageData(sourceImage, 0, 0); 
    } 

    // Call the above function once the source image has loaded 
    sourceImage.onload = imgToPixelArray(); 

    // Get Access to the pixel map now stored in our 2D render 
    var imageData = ctx.getImageData(0, 0, 400, 300); 
} 

Почему я получаю сообщение об ошибке, когда я пытаюсь поставить пиксельные данные моего источника изображения в 2D в контекст рендеринга сетки?

Answer 1

Похоже, вы хотите скопировать подразделение изображения 400x300 и нарисовать его на холсте.

Для этого не требуется .getImageData и .putImageData.

Вы можете использовать версию отсечение .drawImage, чтобы сделать это:

context.drawImage(
    img,    // the image source 
    0,0,    // start clipping from the source at x=0, y=0 
    400,300   // clip a subsection that's 400x300 in size 
    0,0    // draw that clipped subsection on the canvas at x=0,y=0 
    400,300   // make the drawing 400x300 (don't scale) 
) 

Вот пример кода и демо:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape2.jpg"; 
 
function start(){ 
 
    ctx.drawImage(img, 0,0,400,300, 0,0,400,300); 
 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<h4>subsection clipped to the canvas</h4> 
 
<canvas id="canvas" width=400 height=300></canvas> 
 
<h4>The original image</h4> 
 
<img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape2.jpg">