javascript - 使用通用处理程序将图像加载到 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?

确实如此，但是您会遇到麻烦，因为您需要自己手动解析图像文件格式(包含图像格式、颜色模型等的所有各种组合以及错误检查等)。这是可行的( been there done that )，但除非您需要访问某些特殊数据或位图格式，否则浏览器很可能至少比 JavaScript 中的手动方法更快地完成这项工作。

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

这一行:

var uInt8Array = new Uint8ClampedArray(this.response);

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