Как я могу ждать URL данных изображения, когда будете готовы? - PullRequest
Новая
       35

Как я могу ждать URL данных изображения, когда будете готовы?

0 голосов
/ 10 июня 2018

Я хочу использовать изображение, когда будете готовы.Мой код работает, но не каждый раз, когда

1002 * Иногда результат неправильно dataurl, как это - данные:.. Изображение / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAkElEQVRoQ + 2SwQkAMAyEkv2X7g6CUIL9nxDtzpG3R + 6YDvmtZEUqIhnoa0liMbYiWJ00rIgkFmMrgtVJw4pIYjG2IlidNKyIJBZjK4LVScOKSGIxtiJYnTSsiCQWYyuC1UnDikhiMbYiWJ00rIgkFmMrgtVJw4pIYjG2IlidNKyIJBZjK4LVScOKSGIx9kyRBxCRADOd5J92AAAAAElFTkSuQmCC 1004 * Результат должен нравиться это -данные: изображения / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAE7klEQVRoQ + 2YaWxVVRDHf3Pe0pYW2yJSQBItYTUS2RLUNAGRqCSytEKlWPaIAb7wBbcAIgZTiQlpJCbVIEHTFlvyimyKIShpGjVBpEogoEKhobK2BaHL63v3mHsVLO1b7m24xpA3X8 / М // г / М + fMnXOFe8TkHtFBQsj / rZKJiiQq4lIGena0vpnkpT6zD0r8iDEQYRgGV / FwgoKddS5xjQnrTMi6dYoRtUPQ5ICMQeupgB9NC5CKMAgwhRxE8RVBDjG / 6tJ / Ледяное + kJJpvUj1TkbpZYg8BmSh8UYhGQYuI3IIRQniqSG / MuimIHtCTBFp3lkInyAotIPvj9ZnENlMWMopDFxA0G4Iii8kkNuPFvJQbAD69JDECQw2cTNUyiu7zWN41y2 + kNKZS0CWI4y9tbtfecn0p3GxrdkuIY1IPWFepDDwvd0gJ36xhVTMTiMU + hoYZ13qf6y3N4XicUssMcUn9 / DD1VO0huNegTDCIVqNhSz + ot4JSТу + 0YVsXZhMyrUpGOyOBLRp7GLmPTyR2uY6ys9W82XDT5xvvWq59k / OwKe81Ldc6RrahJZVDGzcxlPfhuwQtOsTXUjF7P6EO5ajZU1XsCTlY9qD46nMWYVGc7ntOvsajtDUcZM0bxJBI0R2ahZ9k3ozs7qIP1qbbkFo0JtpD77Lon0X7JK04xddSNkLIxCjCM2MSEC5gyawZcIK63jdspZQu1UJr1IW + dW1ZWw9c / DOcLOLKSOHgl0Ndgja9YkuZHve42ijDC3ZkcCezhrFxjELGJs5uNtyY / AG5XXVrPmlnKbgjTvXRc4QZh6FgRq7JO34RRZSMdtDODgeraJ2mPt8KRx + 9n2G9h7QbZ + KczVsMpvAlVPW0etipzFkDYWBMjsE7fpEr0hp7gyEbUB6JLBMfyo7cl5lctaoO5YvtDWTW13EkcbT1l3pZpo / 8ehZzNlpdsO7ZrGEzEF4GxgWabes5AxefySPlcOfv73c0NpIyW / 7WX + sMjbBdp3Jop22P0J21EYX8tn04Xg8ZusdGgnII4r1owosIb28SbSHO9hy + gDvHa / iXPe22xmilrlVo + 2Qc + ITQ / 2mEwptB56LBrhi6FTWPppPv + R09jb8yDvHKq2PYxwrZm7VynhOTtdjfBAnJePPmI / Ixkj3RIkwvs8QqqdsIKwNJh5YzdHmOjoi3Yt / WTUjUkhBYK9TovH8Y48opTPHIaoI9GRAdQYThCcfGM7G0Qv47spJXjv6qSUotsl + vJ5Z5Fd26cnxaMZfjzdr + QmGXkaxFujXFW5k + iBGZ2Rz / Fq9NarEMAOtz6LUGxQEPo9Py7lH / OnXxCzNexPR5qiS3HkLcwo2qxC / EpxF8THh4Ie8tPf2vOKcbvQIe0KsKTi8CNHL0FY79jgg8TtKf4Dy7SC /8ryDOEeu9oSYL8Lt0wdgqBmIzAOeiLnL36 / AMJoaRIq53ncPSz8KufU6NLnYE9KZddn0LAyZhFLPACOBgcBDQCtwEeEGmksIpRD + mYJdhx2ltofOzoWYG5Us9ZF8ORsfg8HwITSj5X5E9QI5gUf9SkqbwTR3nrWRtPZMSFck8zfRW + VMA + jKjwU7Rbo7Quzs5LJPQojLCXYMn6iI45S5HJCoiMsJdgyfqIjjlLkckKiIywl2DJ + oiOOUuRyQqIjLCXYMn6iI45S5HHDPVOQvVIt9QsL8mT0AAAAASUVORK5CYII = 1006 * Я называю эту функцию в цикле: 
 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
        })
    }

Мой цикл, как это.С помощью этого цикла я загружаю и поворачиваю маркеры на листовой карте. 

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

1 Ответ

0 голосов
/ 12 июня 2018

Сначала я хочу поблагодарить всех за совет.Я нашел ответ на свой вопрос.Иногда моя функция возвращала пустое пустое изображение вместо готового изображения, потому что я не ждал загрузки ресурса (img.scr), и поэтому функция возвращала мне пустое пустое изображение.В моей старой функции эта строка - img.onload = () => resol (canvass.toDataURL ()) не гарантирует, что изображение готово к использованию (ресурс загружен) и возвращает мой ответ при создании пустого изображения.является ли он пустым или содержит ресурс внутри себя.Чтобы решить эту проблему, я использовал плагин image-proms.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;
}
...