javascript中的原始图像数据转换答案

【问题标题】：Raw image data conversion in javascriptjavascript中的原始图像数据转换
【发布时间】：2014-07-06 00:09:19
【问题描述】：

我从服务器获取原始图像数据，在画布上绘制它的最佳选择是什么？我该怎么做？请提供见解，因为我对 html 和 javascript 非常陌生。我只想知道如何转换原始数据并将其绘制在 html 和 javascript 的画布上，如果我知道原始图像的宽度和高度。基本上我不知道我需要做的原始图像的格式一些转换。

【问题讨论】：

你看过this页面吗？

标签： javascript html image html5-canvas

【解决方案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);

【讨论】：

如何先从原始图像中提取 RGBA 值？
您的问题暗示您已经从 RAW 转换为可读格式。未经转换，原始文件不能作为 RGB 直接读取。使用原始转换器（存在于许多图像处理应用程序中）读取原始文件、应用调整并将结果输出为标准图像格式（.png、.jpg 等）或获取 RGB 值。或者，您可以查看 imageMagick 是否支持转换您的特定 RAW 文件：imagemagick.org/script/formats.php
对不起，它只是一张 RAW 图像，相应地编辑了问题
您是否查看了 imagemagick——它确实转换了一些最常见的原始文件？