使用Java img第一次不加載圖像將圖像轉換為base64字符串

Question

我嘗試按照此stacko頁面上顯示的代碼使用javascript / angularjs將圖像轉換為base64字符串， 您也可以在此處詳細檢查代碼。

function toDataURL(src, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
  };
  img.src = src;
  if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }
}

toDataURL(
  'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
  function(dataUrl) {
    console.log('RESULT:', dataUrl)
  }
)

我在控制器內部的init中調用此函數，但是當我加載頁面時，圖像不會第一次加載，但是如果我再次加載頁面，則圖像會加載。 我還制作了一個按鈕來再次調用該函數，並且正如預期的那樣，在加載頁面並按下按鈕之后，圖像加載就很好了。

調試代碼后，我發現圖像僅在到達最后的if語句時加載，如詳細代碼所述，該語句正在刷新緩存。 但是，由於它是第二次嘗試，這不是正常的方法嗎？

  if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }

到達這里后，繼續進行img.onload並再次加載圖像，這次圖像加載就很好了。

我想念什么？ 我需要做些什么來等待圖像加載嗎？ 我可以做些事以便以后加載嗎？ 或者是別的什么？

Answer 1

原來我沒有解決可以使用ui-cropper中的ImgPreview的事實，因此不需要轉換圖像。 我只在視圖中創建了一個$ scope來獲取該ImgPreview並將其發送到數據庫。 可悲的是我無法提供任何代碼。