Fatal编程技术网
  • javascript/
  • Javascript 准备好后如何等待图像数据url？

Javascript 准备好后如何等待图像数据url？

javascript image-processing leaflet

Javascript 准备好后如何等待图像数据url？,javascript,image-processing,promise,async-await,leaflet,Javascript,Image Processing,Promise,Async Await,Leaflet,我想在准备好后使用图像。 我的代码有效，但不是每次都有效 有时结果是错误的dataurl，如下所示-data:image/png；base64，Ivborw0KggoaaaAnsuhueugaadiaaaycayaaaaep4ixaaakeleqvroq+2SwQkAMAyEkv2X7g6CUIL9nxDtzpG3R+6ydvmtzeuqiHnoa0LimbyIwJ00RigkFmmRgTvJW4PiyJg2LidJbJbJbJbJbJb4LVSCOkGixtJyntsCqyYu1Uc2Rigk

我想在准备好后使用图像。 我的代码有效，但不是每次都有效

有时结果是错误的dataurl，如下所示-data:image/png；base64，Ivborw0KggoaaaAnsuhueugaadiaaaycayaaaaep4ixaaakeleqvroq+2SwQkAMAyEkv2X7g6CUIL9nxDtzpG3R+6ydvmtzeuqiHnoa0LimbyIwJ00RigkFmmRgTvJW4PiyJg2LidJbJbJbJbJbJb4LVSCOkGixtJyntsCqyYu1Uc2RigkFmRgTvJbJbJbJbJbJbJbJbJbJbJbJbJbJbJbJb4LVSCOkTvJ4PiyJbJbJbJbJbJbJbJbJ

结果必须如下-数据：image/png；base64，10月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2月2日，2日，2月2日，2月2日，2月2日，2日，2月2日，一个中国政府的一个研究小组的一个新的一次，一次，一次，一次，一次，一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次对一次的I3IIR2.一个新的概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，两个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，一个新概念，2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+2+AJTDUCZM0BXJBI0R2AHZ9K32.中国的一个城市是一个城市，一个城市是一个城市，一个城市是一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一V73C0NPIYW/7WX+2.文中给出了一个虚拟的视频（一个虚拟的视频视频视频（一个虚拟的视频视频视频+2个质量控制+ITq（2）文中给出了一个新的视频（2）文中给出了一个视频（2）文中给出了一个视频（2）文中给出了一个视频（2）文中提出了一个视频（2）文中的视频（2）文中（2）文中的视频（2）文中的视频（2）文中提出了一个视频（2）文中的视频（2）文文中的视频（2）文中的视频（2）文中的视频（2）文中的视频（2）文中的视频（2）是一个视频（2）文中的视频（2）文文中提出了一个视频（2）文中的视频（2）文中的视频（2）文中的视频（2）文文中的视频（2）文中的视频（2）文文文中的视频（2）文中XQEPO9PY7LH/OnXxCzNexPR5qiS3HkLcwo28月8日，中国政府在一个8月的8月8日起，在一个8月的8月8日，中国政府在一个8月的8月8日，在一个6月的8月8日，中国政府在一个8月的8月8日，在一个8月的8月8日，一个8月的8月8日，中国政府在一个8月的一个8月的8月8月的8日，一个8月8月的8月的8月8日，在一个8月的一个8月的一个8月的8月的8月的8日，一个8月的一个8月的8月的8月的8月的一个8月的一个8月的8月的一个8月的8月的8月的8月的8日，一个8月的一个8月的8月的8月的8月的8月的8月的一个8月的8月的8月的8月的8 8月的5HHDPVOQVVIT9QSL8MT0AAaasuvork5cyii=

我在循环中调用此函数：

 function delayedLog(item, urls){
        return new Promise((resolve, reject) => { 
        let img = new Image();
        img.src = urls;
        canvass = document.createElement('canvas'), context = canvass.getContext('2d');
        canvass.width = 50;
        canvass.height = 50;
        context.translate(15, 15);
        context.rotate(item*Math.PI/180); 
        context.translate(-15, -15);
        context.drawImage(img, 0, 0, img.width, img.height);
        img.onload = () => resolve(canvass.toDataURL())
        img.onerror = reject
        })
    }
我的循环是这样的。 通过这个循环，我加载并旋转Leavlat地图上的标记

async function processArray(array) {    
    for (let item of array) {               
        url = '<?php echo base_url();?>/images/direction_green.png';
        var ico = L.icon({
            iconUrl: await delayedLog(item['Angle'], url),
            iconSize: [(4.5*(mymap.getZoom()))/2, (4.5*(mymap.getZoom()))/2],
            iconAnchor: [15, 15],
            popupAnchor: [-10, -10]
        });

        L.marker([item['Y'], item['X']],
        {icon: ico})
        .bindPopup("<p>Време: "+item['dateTime']+" </p><p> скорост: "+item['Speed']+" км/ч.</p><p> Реакция: "+item['Reaktion']+" </p><p> "+item['Engine']+" </p>" ).addTo(shelterMarkers);
    }
    return shelterMarkers;
}
异步函数processArray（数组）{ 对于（数组的let项）{ url='/images/direction_green.png'； var ico=L.icon({ iconUrl:Wait delayedLog（项目['Angle']，url）， iconSize:[（4.5*（mymap.getZoom（））/2，（4.5*（mymap.getZoom（））/2]， iconAnchor:[15,15]， popupAnchor:[-10，-10] }); L.标记（[项目['Y']，项目['X']]， {图标：ico}） .bindpoppopup（“Сааач:”+item['dateTime']+”

“+item['Speed']+”（*.item['Speed']+”

“+item['Engine']+”

”）。添加到（Sheltermakers）； } 退耕还林者； }
首先，我要感谢大家的建议。 我找到了我问题的答案。 有时，我的函数返回一个空的空白图像而不是一个完成的图像，因为我没有等待加载资源（img.scr），所以函数返回给我一个空的空白图像。 在我的旧函数中，这行-img.OnLoad＝（）= > Debug（Cavas.toDATAURL（））并不真正保证图像已经准备好使用（资源被加载），并且在空白图像被创建时是否返回响应，无论它是空的还是包含自身的资源。 为了解决这个问题，我使用了image-promise.min.js插件。 这里是最终的代码，工作完美，我希望帮助另一个如果有同样的问题

processArray(js_tracks);

async function processArray(array) {
    shelterMarkers.eachLayer(function(layer){
        mymap.removeLayer(layer);
    });

    for (let item of array) {
        if(icontmp[item['Reakt']][item['Angle']] != -1){
            var iUrl = icontmp[item['Reakt']][item['Angle']];
        }
        else{
            icontmp[item['Reakt']][item['Angle']] = await delayedLog(item['Angle'], item['Reakt']);
            var iUrl = icontmp[item['Reakt']][item['Angle']];           
        }

        var ico = L.icon({
            iconUrl: iUrl,
            iconSize: [(4.5*(mymap.getZoom()))/2, (4.5*(mymap.getZoom()))/2],
            iconAnchor: [15, 15],
            popupAnchor: [-10, -10]
        });

        L.marker([item['Y'], item['X']],
        {icon: ico})
        .bindPopup("<p>Време: "+item['dateTime']+" </p><p> скорост: "+item['Speed']+" км/ч.</p><p> Реакция: "+item['Reaktion']+" </p><p> "+item['Engine']+" </p>" ).addTo(shelterMarkers);
    }
    shelterMarkers.addTo(mymap);
}

function delayedLog(angles, reak){
     if(reak == 0){
         var imgs = '<?php echo base_url();?>/images/stop_blue.png';
     }
     else if(reak == 1){
         var imgs = '<?php echo base_url();?>/images/stop_green.png';
     }
     else if(reak == 2){
         var imgs = '<?php echo base_url();?>/images/direction_green.png';
     }
     else if(reak == 3){
         var imgs = '<?php echo base_url();?>/images/stop_red.png';
     } 
     else if(reak == 4){
         var imgs = '<?php echo base_url();?>/images/direction_red.png';
     }
     else{
         var imgs = '<?php echo base_url();?>/images/stop_black.png';
     }

    var image = loadImage(imgs).then(function (img) {
        let canvass = document.createElement('canvas');
        let context = canvass.getContext('2d');
        canvass.width = 50;
        canvass.height = 50;
        context.translate(15, 15);
        context.rotate(angles*Math.PI/180); 
        context.translate(-15, -15);
        context.drawImage(img, 0, 0, img.width, img.height);
        return canvass.toDataURL();
    })
    return image;
}

processArray（js_轨迹）；
异步函数processArray（数组）{
shelterMarkers.eachLayer（函数（层）{
mymap.removeLayer（层）；
});
for（数组的let项）{
如果（icontmp[item['Reakt']][item['Angle']]！=-1）{
变量iUrl=icontmp[项目['Reakt']][项目['Angle']]；
}
否则{
icontmp[item['Reakt'][item['Angle']]=Wait delayedLog（item['Angle']，item['Reakt']）；
变量iUrl=icontmp[项目['Reakt']][项目['Angle']]；
}
var ico=L.icon({
iconUrl:iUrl，
iconSize:[（4.5*（mymap.getZoom（））/2，（4.5*（mymap.getZoom（））/2]，
iconAnchor:[15,15]，
popupAnchor:[-10，-10]
});
L.标记（[项目['Y']，项目['X']]，
{图标：ico}）
.bindpoppopup（“Сааач:”+item['dateTime']+”
“+item['Speed']+”（*.item['Speed']+”
“+item['Engine']+”
”）。添加到（Sheltermakers）；
}
shelterMarkers.addTo（mymap）；
}
功能延迟日志（角度、收割）{
如果（reak==0）{
var imgs='/images/stop_blue.png'；
}
否则如果（reak==1）{
var imgs='/images/stop_green.png'；
}
否则如果（reak==2）{
var imgs='/images/direction_green.png'；
}
否则如果（reak==3）{
var imgs='/images/stop_red.png'；
} 
否则如果（reak==4）{
var imgs='/images/direction_red.png'；
}
否则{
var imgs='/images/stop_black.png'；
}
var image=loadImage（imgs）。然后（函数（img）{
让canvass=document.createElement（'canvas'）；
让context=canvass.getContext（'2d'）；
画布宽度=50；
画布高度=50；
语境。翻译（15，15）；
旋转（角度*数学PI/180）；
翻译（-15，-15）；
绘图图像（img，0，0，img.width，img.height）；
return canvas.toDataURL（）；
})
返回图像；
}
url来自哪里？哪种类型的
错误数据url
？它是空的/空白的，还是来自不同的迭代，还是什么？您也可以考虑使用<代码>让<代码>