从ng-src访问PNG数据（计算平均RGB颜色）

Question

我的问题跟"get average color of image via javascript" this Fiddle by Ariona Rian有一个很好的答案。

问题是：如果我通过ng-src获取图像，那么如何将文档元素或数据传递给函数getAverageRGB(imgEl)？

这是一个简单的例子。我正在从包含URL的数组中加载图像。当图像被加载时，点击其中一个图像（实际上是周围的div），我想计算我点击的图像的平均RGB值。

<div ng-repeat="url in urlArray">
    <div ng-click="trigger('{{$index}}')">
        <img id="img_{{$index}}" data-ng-src="{{url}}" >
    </div>
</div>

<div>
    <p>The average RGB value of the selected image is: {{avgRGB}}</p>
</div>

如何在控制器中编写函数，以便调用计算平均RGB的函数？

看起来我必须传递画布或类似的DOM元素，但我无法理解。

// function inside controller
$scope.trigger = function(index) {

    // Obtain the variable imgEl <--- How?

    $scope.avgRGB = getAverageRGB(imgEl);
};

我尝试通过此调用直接传递img元素：

// inside the function 'trigger()'
var elID = 'img_' + index
var imgEl = angular.element( document.querySelector( elID ) );

然而，函数getAverageRGB()抱怨。