我可以在不使用图像元素的情况下将图像直接加载到画布上吗答案

【问题标题】：Can I load an image directly on to a canvas without using the image element我可以在不使用图像元素的情况下将图像直接加载到画布上吗
【发布时间】：2015-07-20 04:32:45
【问题描述】：

我正在使用画布控件。我使用图像元素在图像 onload 事件上将图像绘制到画布上。

我正在寻找是否可以通过不先加载到图像元素并直接将图像定位到canavs来提高性能。

这个可以吗？

这是我当前的代码：

desktopImage.src = "/Media/FrameHandler.ashx?camIndex=" + camIndex;

desktopImage.onload = function () {
    ctxLiveViews.drawImage(desktopImage, 0, 0);
}

我一直在玩这个代码，但 blob 需要一个 ArrayBuffer：

var blob = new Blob('data:image/jpeg;base64,' + jpeg, { type: "image/jpeg" });
var url = (URL || webkitURL).createObjectURL(blob);
(URL || webkitURL).revokeObjectURL(url);

修改代码：

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

通用处理程序：

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

图像输出：

【问题讨论】：

Idk 无论如何都会这样做，但您的 desktopImage 变量应该是 var desktopImage = new Image() 并在设置 desktop.src 之前添加 onload
像这样：stackoverflow.com/a/15193645/4310091
@Edwin，嗨，谢谢。它在其他地方被声明为图像，因为它是一个全局变量
我不明白你为什么不想使用图像元素，你知道你不必将它附加到文档中吗？
Edwin 我想看看我是否可以删除一条处理线以加快加载图像的时间。正如我发现最好的使用是图像控制。我只需要知道替代方案:)

标签： javascript image-processing html5-canvas

【解决方案1】：

这里是直接将图像数据加载到画布的方法，不考虑数据是否正确绘制：

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
var imageData = ctx.getImageData(0, 0, 256, 256);

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://fiddle.jshell.net/img/logo.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
    var uInt8Array = new Uint8ClampedArray(this.response);
    imageData.data.set(uInt8Array);
    ctx.putImageData(imageData, 0, 0);
};

xhr.send();

jsfiddle

如果你想获得 blob：

xhr.onload = function (e) {
    var uInt8Array = new Uint8Array(this.response);
    var blob = new Blob([ uInt8Array ], { type: "image/png" });
    var urlCreator = window.URL || window.webkitURL;
    var url = urlCreator.createObjectURL(blob);       
};

【讨论】：

嗨，我已经尝试过了，但它不起作用。我将修改我的问题，向您展示我的新代码。