Javascript 将数据URI转换为图像数据

考虑到上面的代码片段，如果我想从数据URL获取一个图像数据数组，我会在画布上绘制它，那么如何返回图像数据

/**
 * Converts data URI in 'image/png' format to an image data object
 * @param dataURL Base64 encoded string
 * @returns {ImageData/undefined}
 */
convertDataURLToImageData: function (dataURL) {
    if (dataURL !== undefined && dataURL !== null) {
        var canvas, context, image, imageData;
        canvas = document.createElement('canvas');
        canvas.width = 470;
        canvas.height = 470;
        context = canvas.getContext('2d');
        image = new Image();

        image.addEventListener('load', function(){
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            //how do i return this?
        }, false);
        image.src = dataURL;

        return imageData;
     }
}

---

尝试此操作，希望您能够理解。

问题在于您的函数是异步的，因为您正在等待

加载事件

然后，你可以使用承诺：


函数convertURIToImageData（URI）{
返回新承诺（功能（解决、拒绝）{
if（URI==null）返回reject（）；
var canvas=document.createElement（'canvas'），
context=canvas.getContext（'2d'），
图像=新图像（）；
image.addEventListener（'load'，function（））{
canvas.width=image.width；
canvas.height=image.height；
context.drawImage（图像，0，0，canvas.width，canvas.height）；
解析（context.getImageData（0，0，canvas.width，canvas.height））；
}，假）；
image.src=URI；
});
}
变量URI=“数据：图像/x图标；base64，一个AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//3w9P+IoLf/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[9NLSH/TZbB/02Wwf////+Ft9T/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/E4zV/xOM1f8TjNX/E4童童童童军/YK/YK/2/5 5 5 5 5 5 5 5 5 5 5 5 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 tjnx/AIv//wCL//8Ai//AIv//gMX//wCL//8gmv////Axf//AIv//wCL//8Ai///AIv//wCL//8Ai///AIv//wCL//8Ai///AIv//wCL//v+P///////+/7/7///+4/7 7//++7 7/7 7/7 7/7/7/7/7 7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7/7////7/7/7/7/7/7///7/7/7//7/7/7 7//////7 7 7 7 7 7////////7 7将将将将将将将将将将将将将将将将将将将将将将将将将//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
convertURIToImageData（URI）。然后（函数（imageData）{
//在这里您可以使用imageData
控制台日志（imageData）；
})重复的问题——但我认为提问者想要一个
ImageData
对象（），不是
HTMLImageElement
@Oriol是的，我正在寻找一个ImageData对象；）如何使用处理程序中的ImageData？@RudreshAjgaonkar您想用它做什么？我需要使用websocket将图像发送到服务器。我尝试使用以下示例。[函数convertDataURLToImageData（dataURL，回调）{if（dataURL！==未定义和&dataURL！==null）{var canvas，context，image；canvas=document.createElement（'canvas'）；canvas.width=470；canvas.height=470；context=canvas.getContext（'2d'）；image=new image（）；image.addEventListener（'load'，function（）{context.drawImage（image，0，canvas.width，canvas.height）
var image_trail=canvas.toDataURL（'image/png'）.slice（22）；ws.send（image_trail）
callback（context.getImageData（0,0，canvas.width，canvas.height））；}，false）；image.src=dataURL；}}@RudreshAjgaonkar据我所知，websocket只能发送字符串。
var img = new Image;
img.src = strDataURI;