Angular / Resize-Base64 - не удалось выполнить drawImage - PullRequest
Новая
       24

Angular / Resize-Base64 - не удалось выполнить drawImage

0 голосов
/ 30 мая 2018

Я использую 'Resize-base64' (https://github.com/dizhar/resize-base64) в Angular. Когда я передаю строку base64, я консоль регистрируется в скрипте, чтобы дважды проверить правильность полученных значений. Они были. Однако, когдаон получает 'var img = newImage ()', он создает изображение, но кажется, что для заполнения атрибута src строкой base64 требуется несколько секунд. Поэтому, когда я консоль log 'img.width and height', онивсе возвращаются как '0', следовательно, выдает ошибку:

Не удалось выполнить 'drawImage' для 'CanvasRenderingContext2D': аргумент image является элементом canvas с шириной или высотой 0.

Есть ли способ убедиться, что атрибут src заполняется до запуска остальной части скрипта? Или есть очевидная причина ошибки, которую я пропускаю?

Мой угловой компонент 

setLargeImageDimensions(resetBase64Image) {
   var img = resizebase64(resetBase64Image, 1000, 1000); 
}

Узловый модуль / скрипт Resize-Base64 

module.exports = function(base64, maxWidth, maxHeight){
  console.log('base64 = ', base64);
  console.log('maxWidth = ', maxWidth);
  console.log('maxHeight = ', maxHeight);

  // Max size for thumbnail
  if(typeof(maxWidth) === 'undefined')  maxWidth = 500;
  if(typeof(maxHeight) === 'undefined')  maxHeight = 500;

  // Create and initialize two canvas
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var canvasCopy = document.createElement("canvas");
  var copyContext = canvasCopy.getContext("2d");
  var canvasID = canvas.setAttribute('id', 'resize-base64');



  // Create original image
  var img = new Image();
  img.src = base64;

  // Determine new ratio based on max size
  var ratio = 1;
  if(img.width > maxWidth)
     ratio = maxWidth / img.width;
  else if(img.height > maxHeight)
     ratio = maxHeight / img.height;


 // Draw original image in second canvas
 canvasCopy.width = img.width;
 canvasCopy.height = img.height;
 copyContext.drawImage(img, 0, 0);

 // Copy and resize second canvas to first canvas
 canvas.width = img.width * ratio;
 canvas.height = img.height * ratio;
 console.log('   canvas.width = ',    canvas.width);
 console.log('  canvas.height  = ',   canvas.width );
 ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);


 return maxWidth;
}
...