是否可以直接将base64image加载到我的canvas控件中,而不使用单独的img控件

时间:2015-08-01 16:53:39

标签: javascript image canvas

我通过网络套接字在字节数组中收到一个jpeg。

然后我将其转换为base64。

然后我将图像控件的来源设置为此。

然后在onload甚至图像上我将该图像分配给我的画布控件。

有没有办法在不使用图像控件的情况下直接将此数组加载到画布控件中?

我的代码:

ws.onmessage = function (frame) {
    desktopImage.src = 'data:image/jpeg;base64,' + base64ArrayBuffer(frame);
}

desktopImage.onload = function () {
    try {
        ctxLiveViews.drawImage(desktopImage, 0, 0);
    }
    catch (err) {
        console.log(err);
    }
}

附加:

这不会将图像加载到我的画布:7

function decodeBase64StringToArray(base64String) {
    var decodedString = window.atob(base64String);
    // either create a new array or use the .data array from your .createImageData
    var a =new  Uint8ClampedArray(decodedString.length);
    for (var i = 0; i < decodedString; i++) {
        a[i] = decodedString.charCodeAt(i);
    }
    return a;
}

var imgData = ctxLiveViews[3].createImageData(360, 240);
imgData.data = decodeBase64StringToArray(arrayBufferToBase64(frame));
ctxLiveViews[3].putImageData(imgData, 0, 0);

0 个答案:

没有答案