使用通用处理程序将图像加载到画布中

Question

是否可以使用通用处理程序将图像直接加载到画布控件中而不使用图像元素？

这是我的经纪人：

    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

  

是否可以使用通用处理程序将图像直接加载到画布控件中而不使用图像元素？

确实如此，但您需要手动解析图像文件格式（使用图像格式，颜色模型等各种组合和错误检查等）。它是可行的（been there done that），但除非您需要访问某些特殊数据或位图格式，否则浏览器将至少比JavaScript中的手动方法更快地完成工作。

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

这一行：

var uInt8Array = new Uint8ClampedArray(this.response);

只保存原始文件字节，未压缩，未解码，包括标题，块和元数据。虽然putImageData()需要每像素RGBA格式的原始位图。这就是你看到噪音的原因，因为输入到putImageData的数据是文件本身，而不是位图。