javascript中原始图像数据转换

Question

我从服务器获取原始图像数据，在画布上绘制它的最佳选择是什么，我该如何操作？由于我对html和javascript很新，请给予一点见解。我想知道的是，如果我知道原始图像的宽度和高度，我如何转换原始数据并将其绘制在HTML和JavaScript的画布上。基本上我不知道我需要的原始图像的格式一些转换。

Answer 1

您可以使用context.createImageData创建为imageData对象，你可以用你的RGBA数据从服务器填写：

示例代码演示：http://jsfiddle.net/m1erickson/XTATB/

// test data fill a 30x20 canvas with red pixels 

// test width/height is 30x20 
var canvasWidth=30; 
var canvasHeight=20; 

// resize the canvas 
canvas.width=canvasWidth; 
canvas.height=canvasHeight; 

// create some test data (you can use server data in production) 
var d=[]; 
for(var i=0;i<canvasWidth*canvasHeight;i++){ 
    // red & alpha=255 green & blue = 0 
    d.push(255,0,0,255); 
} 

// create a new imageData object with the specified dimensions 
var imgData=ctx.createImageData(canvasWidth,canvasHeight); 

// get the data property of the imageData object 
// this is an array that will be filled with the test data 
var data=imgData.data; 

// copy the test data (d) into the imageData.data (data) 
for(var i=0;i<data.length;i++){ 
    data[i]=d[i]; 
} 

// push the modified imageData object back to the canvas 
ctx.putImageData(imgData,0,0);