Question

我有一个如下所示的数组：

var imageList = [ image1, image2, image3 ];

此数组中的每个元素都是包含new Image()的变量。例如：var image1 = new Image()。

在设置其网址后，我使用.onload事件为每个元素预加载每个图像。只有在加载了所有图像之后，才会发生其他任何事情。

如何在AngularJS中输出每个数组元素并显示图像？

<li ng-repeat="image in imageList">
   {{ image }}
   /* I want the expected output of the above line to look like
      <img src="./img/xx.svg" /> */
</li>

我不想做下面的代码，因为我已经将数组中的每个元素创建为新的Image（）：

<li ng-repeat="image in someImageList">
   <img ng-src="{{ image.url }}" />
</li>

如果我{{ image }}，则当前输出只是{}的列表。如果仅使用image，则输出是＆＃34;图像＆＃34;的列表。字符串。

我使用JavaScript而不是使用<img/>标记创建新图像元素的原因是1.我需要预加载图像和2.我需要在{{1}中绘制这些图像}}。为相同的图像源创建<canvas>是多余的。此外，它打开了一个模态，显示这些图像的列表打开速度很慢。因此，如果图像已预先加载，则模式可能打开得更快。

Answer 1

您需要将图像转换为数据uri并保存该字符串。

$scope.images = [];

loadImage('./img/xx.svg');

function loadImage(src) {
  var img = new Image();

  img.onload = function() {
    // Create a canvas
    var canvas = document.createElement('canvas');

    // Be sure the canvas is the same size as your image
    canvas.width = this.width;
    canvas.height = this.height;

    // Draw the image to the canvas
    canvas.getContext('2d').drawImage(this, 0, 0);

    // Add the data uri to your scope
    $scope.images.push(canvas.toDataURL('image/png'));

    // "Notify" Angular something has changed
    $scope.$apply();
  }

  img.src = src;
}

然后你可以像这样打印 -

<li ng-repeat="image in images">
   <img ng-src="{{ image }}" />
</li>

图像将是数据uri（不是网址）。

如何使用画布实现此功能取决于您。

如何在AngularJS ng-repeat中呈现包含`new Image（）`的变量？

1 个答案: