使用通用处理程序将图像加载到 canvas

Question

是否可以在不使用图像元素的情况下使用通用处理程序将图像直接加载到 canvas 控件中？

这是我的经纪人：

    public void ProcessRequest(HttpContext context)
    {
        context.Response.AddHeader("Access-Control-Allow-Origin", "*");
        context.Response.ContentType = "image/jpeg";
        var camIndex = Convert.ToInt16(context.Request.QueryString["camIndex"]);
        context.Response.BinaryWrite( Shared.Feeder[camIndex].JpegData);           
    }

我的JavaScript:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1/Media/FrameHandler.ashx?camIndex=' + camIndex, true);                     
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
    var uInt8Array = new Uint8ClampedArray(this.response);
    imageData[camIndex].data.set(uInt8Array);
    ctxLiveViews[camIndex].putImageData(imageData[camIndex], 0, 0);
};
xhr.send();

这给了我这个图像（这显然是错误的）

Answer 1

Is it possible to load an image directly into a canvas control using a generic handler without using the image element?

是的，但是您需要 hand-full，因为您需要自己手动解析图像文件格式（包括图像格式、颜色模型等的各种组合以及错误检查等）向前）。这是可行的 (been there done that)，但很有可能，除非您需要访问某些特殊数据或位图格式，否则浏览器至少会比 JavaScript.[=14 中的手动方法更快地完成这项工作=]

使用 Image 元素很简单，并且可以在编译代码中为您完成所有这些步骤。

这一行：

var uInt8Array = new Uint8ClampedArray(this.response);

将仅保存原始文件字节，未压缩、未解码，包括 header、块和元数据。而 putImageData() 需要每像素 RGBA 格式的原始位图。这就是为什么您会看到噪音，因为输入 putImageData 的数据是文件本身，而不是位图。

使用通用处理程序将图像加载到 canvas

Load image into canvas using a generic handler

javascript

image-processing

generic-handler

html5-canvas