Javascript: холст рисуется перед загрузкой изображения

Question

Javascript: холст рисуется перед загрузкой изображения

1

Я пытаюсь создать коллаж из изображений, все 174x174 пикселей. Программа успешно находит изображения, которые все находятся на моем сервере. Однако он может найти его только в том случае, если дважды нажать кнопку "Сохранить изображение". Это заставило меня поверить, что холст рисуется до того, как тег img загрузил источники. Это было подтверждено, когда я добавил функцию предупреждения для img.onload.

Вот функция, которая запускается при нажатии кнопки "сохранить изображение".

function saveimg(urls)
{
    if(urls.length!=0)
    {
        ///get chart canvas
        var c = document.getElementById('chart');

        //get array length
        var length = urls.length;

        //set correct canvas size

        /*not relevant to the error*/

        //get canvas content
        var ctx=c.getContext("2d");

        //make background black
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, c.width, c.height);


        var i, j, posX = 0, posY = 0, count = 0;
        for(i = 0; i < rows; i++)
        {
            for(j = 0; j < columns; j++)
            {
                if(count < length-2){
                    //assign source to img element
                    var cover = /*image url*/;

                    //if image is not found then draw a gray block
                    if(cover=='../resources/.png'){
                        ctx.fillStyle = "#D3D3D3";
                        ctx.fillRect(posX, posY, 174, 174);
                    }
                    else{
                            //create img html tag
                            var img = document.createElement("img");

                            //check if image loaded
                            img.onload = function(){
                                alert("success");
                            }

                            //assign image source
                            img.src = cover;

                            /draw on canvas
                            ctx.drawImage(img, posX, posY);
                        }
                    }
                }
                posX += 174;
                count++;
            }
            posX = 0;
            posY += 174;
        }   
        //auto-download canvas as a png
        var link = document.createElement('a');
        link.download = 'charts4all.png';
        link.href = c.toDataURL("image/png");
        link.click();
    }
}

Что может быть причиной этого и как я могу его решить?

Douglas Northwell 31 июль 2018, в 07:58

Источник

0

Я считаю, что вы должны предоставить весь свой код. Например, где / когда вы вызываете этот код, который вы предоставили? -KF
K F 31 июль 2018, в 05:36

Теги:

javascript

html5

2 ответа

Ещё вопросы

Я считаю, что вы должны предоставить весь свой код. Например, где / когда вы вызываете этот код, который вы предоставили? -KF

Ian Zhong · Answer 1 · 2018-07-31T04-39-00.000Z

Переместите ctx.drawImage(img, posX, posY) и загрузите функцию в img.onload,

и установите атрибут img crossOrigin чтобы избежать проблем с crossOrigin холстов

                        var img = document.createElement("img");
                         // avoid Tainted canvases issue
                        img.setAttribute("crossOrigin",'Anonymous');

                        //check if image loaded
                        img.onload = function(){
                            alert("success");
                            //draw on canvas
                            ctx.drawImage(img, posX, posY);

                            var link = document.createElement('a');
                            link.download = 'charts4all.png';
                            link.href = c.toDataURL("image/png");
                            link.click();
                        }

                        //assign image source
                        img.src = cover;


                    }

Ullas Hunka · Answer 2 · 2018-07-31T02-43-00.000Z

Вам нужно поставить функцию загрузки вне функции и вызвать ее при загрузке изображения, когда i и j являются последними.

Обновленный код должен быть следующим:

if (i == rows - 1 && j == columns - 1) {
  img.onload = function() {
    img.src = cover;

    //draw on canvas
    ctx.drawImage(img, posX, posY);
    //Call your download function here
    onCompleteLoad();
  }
} else {
  img.onload = function() {
    img.src = cover;

    //draw on canvas
    ctx.drawImage(img, posX, posY);
  }
}

Удалите загрузку из текущей функции и создайте новую для процесса.

function onCompleteLoad() { //auto-download canvas as a png
  var link = document.createElement('a');
  link.download = 'charts4all.png';
  link.href = c.toDataURL("image/png");
  link.click();
}

Изображения по-прежнему загружаются после первой загрузки.
Попробуйте приведенный выше код ...