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

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

这是我的处理程序：

    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();

这给了我这个形象（这显然是错误的）

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

是的，但是您已经忙得不可开交了，因为您需要自己手动解析图像文件格式（使用图像格式、颜色模型等的各种组合以及错误检查等等）。这是可行的（），但除非您需要访问一些特殊的数据或位图格式，否则浏览器至少比JavaScript中的手动方法更快地完成这项工作

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

这一行：

var uInt8Array = new Uint8ClampedArray(this.response);

---

将只保存原始文件字节，未压缩，未编码，包括头、块和元数据。而

putImageData（）

需要每像素RGBA格式的原始位图。这就是为什么您会看到噪声，因为输入putImageData的数据是文件本身，而不是位图。

您看过这篇文章吗？特别是关于手动解析原始jpeg相机流的文章：除非您愿意在Javascript中实现jpeg解码器。MarkE谢谢link@philipp非常感谢。我现在已经证实了这一事实。图像元素是最好使用的：）