Рисование нескольких изображений на холсте. но toDataURL возвращает пустое

Question

Рисование нескольких изображений на холсте. но toDataURL возвращает пустое

1

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

for ( i = 0; i < array.length; i++) {
  img = new Image();
  img.onload=function(){
    ctx.drawImage(img, column*width, row*height, width, height);
    column=column+1;
    if(column==11)
    {
      row=row+1;
      column=0;
    }
    URL.revokeObjectURL(this.src);
  }
  img.crossOrigin = 'anonymous';
  img.src = URL.createObjectURL(array[i]);
}

var DataURL=canvas.toDataURL();

но проблема в том, что я получаю прозрачный png. но если я добавлю холст для документирования правильного изображения, то на холсте. я подозреваю, что что-то асинхронно здесь рушает. но не могу понять это.

Azwar Habib 05 фев. 2018, в 09:44

Источник

0

canvas.toBlob (saveFrame, 'image / jpeg'); function saveFrame (blob) {array.push (blob); }. это мой массив
Azwar Habib 05 фев. 2018, в 08:04

Теги:

javascript

canvas

1 ответ

Ещё вопросы

canvas.toBlob (saveFrame, 'image / jpeg'); function saveFrame (blob) {array.push (blob); }. это мой массив

Eugene Olisevich · Accepted Answer · 2018-02-05T05-53-00.000Z

Прежде всего, да, вы правы в своих предположениях. Вы пытаетесь получить изображение с холста сразу после своего цикла, но в настоящий момент изображения не загружаются по буквам. Итак, ваше действие - дождаться загрузки всех изображений и только затем попытаться сохранить холст. Это может быть достигнуто посредством обещаний, например:

var promises = [];
for(...your loop) {
  ...
  var promise = new Promise(function(resolve, reject) {
    var img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload=function(){
        ...draw image...
        resolve(...resolve with your context...);
    }
    URL.revokeObjectURL(this.src);
  });
  img.src = URL.createObjectURL(array[i]);
  promises.push(promise);
}

Promise.all(promises).then(function(...array of your contexts...) {
   ...make export here...
});

Во-вторых, способность получать DataUrl зависит от источников изображений. Если они находятся на sepparate, а не на вашем домене, и у них нет заголовка с перекрестным контуром со значением * или вашего домена, вы не сможете получить данные, потому что холст становится испорченным в соответствии с политикой безопасности контента (пояснения что испорчено холстом). Но в любом случае, если этот сценарий произойдет, Chrome и другие современные браузеры должны предупредить об этом в консоли.