цикл для создания нескольких холстов с несколькими изображениями, не всегда отображающими изображения - PullRequest
Новая
       9

цикл для создания нескольких холстов с несколькими изображениями, не всегда отображающими изображения

1 голос
/ 31 января 2012

это может быть странным объяснением: Я хочу динамически создать коллекцию холста, в которой будет только одно изображение. И это отображается (после долгих хлопот и избавления от события onload), но когда я пытаюсь обновить страницу, иногда я ничего не получаю на экране. И когда я использовал событие onload (чтобы дождаться загрузки изображения), оно не отображало и не отображало все на последнем холсте.

Вот фрагмент кода: 

var sources = []//the array that contains the images
var divCanvas = document.getElementById('showcase-wrapper')
for(var i=0; i<sources.length; i++){
    img =  new Image()
    img.src = sources[i]
    canvas  = document.createElement('canvas')
    $(canvas).attr('id', i)
    canvas.height=300
    canvas.width=200
    var context = canvas.getContext('2d');
    //onload commented out allows expected display
    //img.onload = function() {
    context.drawImage(img, 0, 0);
    //} 
    divCanvas.appendChild(canvas)
}

Я видел много постов, которые выглядели как мои, и пробовал довольно много, но безрезультатно.

Ответы [ 3 ]

2 голосов
/ 04 февраля 2012

Мне кажется, проблема в том, что контекст var перезаписывается до того, как будет вызвано событие img.onload.Событие img.onload имеет ссылку только на глобальную область.Вот почему отображается только последнее изображение.Вам нужно найти правильный контекст внутри события.

Я не могу проверить ваш код напрямую, но я думаю, что это должно быть примерно так: 

var sources = []//the array that contains the images
var divCanvas = document.getElementById('showcase-wrapper')
for(var i=0; i<sources.length; i++){
    img =  new Image();
    img.src = sources[i];
    img.id = i; //Allow img to remember its corresponding canvas/context
    canvas  = document.createElement('canvas');
    $(canvas).attr('id', i);
    canvas.height=300;
    canvas.width=200;
    var context = canvas.getContext('2d');
    divCanvas.appendChild(canvas);

    img.onload = function() {
        //Use the image id to get the correct context
        var canvas = document.getElementById(this.id);
        var context = canvas.getContext('2d');
        context.drawImage(this, 0, 0);
    } 
}
1 голос
/ 03 февраля 2012

Я нашел исправление здесь:

https://developer.mozilla.org/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Drawing_images

Очевидно, что они оставили img.onload, чтобы вызвать функцию после завершения загрузки тела. Однако я до сих пор не понимаю, почему мой сценарий или решение ellisbben не работали.

Если кто-нибудь ответит на это, это будет очень приветствоваться ...

1 голос
/ 31 января 2012

Для согласованного поведения вы должны использовать onload.Если вы этого не сделаете, код для рисования на холсте может быть выполнен до загрузки изображения, и требуемое изображение не будет нарисовано.

Возможно, onload s, которые будут рисоваться на других холстах, не будутвызван, потому что Image s собирают мусор до того, как событие может сработать.

Попробуйте добавить 

var images = [];

в начале кода и 

  images.push(img);

После строки img = new Image().

Если это не сработает, попробуйте сначала добавить эти изображения в дерево DOM-- img.setAttribute('style', 'display: none'), чтобы вы их не видели и не мешали работе с документом.структура.

...