准备好后如何等待图片数据网址？

Question

I want to use image when ready. My code works, but not every time.

Sometimes the result is wrong dataurl like this - data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAkElEQVRoQ+2SwQkAMAyEkv2X7g6CUIL9nxDtzpG3R+6YDvmtZEUqIhnoa0liMbYiWJ00rIgkFmMrgtVJw4pIYjG2IlidNKyIJBZjK4LVScOKSGIxtiJYnTSsiCQWYyuC1UnDikhiMbYiWJ00rIgkFmMrgtVJw4pIYjG2IlidNKyIJBZjK4LVScOKSGIx9kyRBxCRADOd5J92AAAAAElFTkSuQmCC.

The result must like this - data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAE7klEQVRoQ+2YaWxVVRDHf3Pe0pYW2yJSQBItYTUS2RLUNAGRqCSytEKlWPaIAb7wBbcAIgZTiQlpJCbVIEHTFlvyimyKIShpGjVBpEogoEKhobK2BaHL63v3mHsVLO1b7m24xpA3X8/M//z/M+fMnXOFe8TkHtFBQsj/rZKJiiQq4lIGena0vpnkpT6zD0r8iDEQYRgGV/FwgoKddS5xjQnrTMi6dYoRtUPQ5ICMQeupgB9NC5CKMAgwhRxE8RVBDjG/6tJ/Icy+kJJpvUj1TkbpZYg8BmSh8UYhGQYuI3IIRQniqSG/MuimIHtCTBFp3lkInyAotIPvj9ZnENlMWMopDFxA0G4Iii8kkNuPFvJQbAD69JDECQw2cTNUyiu7zWN41y2+kNKZS0CWI4y9tbtfecn0p3GxrdkuIY1IPWFepDDwvd0gJ36xhVTMTiMU+hoYZ13qf6y3N4XicUssMcUn9/DD1VO0huNegTDCIVqNhSz+ot4JSTu+0YVsXZhMyrUpGOyOBLRp7GLmPTyR2uY6ys9W82XDT5xvvWq59k/OwKe81Ldc6RrahJZVDGzcxlPfhuwQtOsTXUjF7P6EO5ajZU1XsCTlY9qD46nMWYVGc7ntOvsajtDUcZM0bxJBI0R2ahZ9k3ozs7qIP1qbbkFo0JtpD77Lon0X7JK04xddSNkLIxCjCM2MSEC5gyawZcIK63jdspZQu1UJr1IW+dW1ZWw9c/DOcLOLKSOHgl0Ndgja9YkuZHve42ijDC3ZkcCezhrFxjELGJs5uNtyY/AG5XXVrPmlnKbgjTvXRc4QZh6FgRq7JO34RRZSMdtDODgeraJ2mPt8KRx+9n2G9h7QbZ+KczVsMpvAlVPW0etipzFkDYWBMjsE7fpEr0hp7gyEbU B6JLBMfyo7cl5lctaoO5YvtDWTW13EkcbT1l3pZpo/8ehZzNlpdsO7ZrGEzEF4GxgWabes5AxefySPlcOfv73c0NpIyW/7WX+sMjbBdp3Jop22P0J21EYX8tn04Xg8ZusdGgnII4r1owosIb28SbSHO9hy+gDvHa/iXPe22xmilrlVo+2Qc+ITq/2mEwptB56LBrhi6FTWPppPv+R09jb8yDvHKq2PYxwrZm7VynhOTtdjfBAnJePPmI/Ixkj3RIkwvs8QqqdsIKwNJh5YzdHmOjoi3Yt/WTUjUkhBYK9TovH8Y48opTPHIaoI9GRAdQYThCcfGM7G0Qv47spJXjv6qSUotsl+vJ5Z5Fd26cnxaMZfjzdr+QmGXkaxFujXFW5k+iBGZ2Rz/Fq9NarEMAOtz6LUGxQEPo9Py7lH/OnXxCzNexPR5qiS3HkLcwo2qxC/EpxF8THh4Ie8tPf2vOKcbvQIe0KsKTi8CNHL0FY79jgg8TtKf4Dy7SC/8ryDOEeu9oSYL8Lt0wdgqBmIzAOeiLnL36/AMJoaRIq53ncPSz8KufU6NLnYE9KZddn0LAyZhFLPACOBgcBDQCtwEeEGmksIpRD+mYJdhx2ltofOzoWYG5Us9ZF8ORsfg8HwITSj5X5E9QI5gUf9SkqbwTR3nrWRtPZMSFck8zfRW+vMA+jKjwU7Rbo7Quzs5LJPQojLCXYMn6iI45S5HJCoiMsJdgyfqIjjlLkckKiIywl2DJ+oiOOUuRyQqIjLCXYMn6iI45S5HHDPVOQvVIt9QsL8mT0AAAAASUVORK5CYII=

I call this function in loop:

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

My loop is like this. With this loop I load and rotate the markers on the leaflat map.

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

Answer 1

First I want to thank everyone for the advice. I found the answer to my question. Sometimes my function returned an empty blank image instead of a finished image because I did not wait to load the resource (img.scr) and so a function returned to me an empty blank. In my old function this line - img.onload = () => resolve (canvass.toDataURL ()) does not really guarantee that the image is ready for use (the resource is loaded) and returns my response when the blank image is created whether it is empty or contains the resource within itself. To solve the problem, I used the image-promise.min.js plugin. Here is the final code that works flawlessly, I hope to help another if there is the same problem.

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