时间戳

首页 > 解决方案 > 使用 javascript img 将图像转换为 base64 字符串第一次未加载

javascript - 使用 javascript img 将图像转换为 base64 字符串第一次未加载

问题描述

我尝试按照此 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并再次加载图像，这次图像加载得很好。

我错过了什么？我需要做些什么来等待图像加载吗？我可以做些什么让它稍后加载吗？或者是别的什么？

标签： javascriptangularjsimage

解决方案

原来我没有解决可以使用 ui-cropper 的 ImgPreview 的事实，因此不需要转换图像。我只在视图中创建了一个 $scope 来获取该 ImgPreview 并将其发送到数据库。可悲的是我无法提供任何代码。

推荐阅读