0

My question follows "get average color of image via javascript" which had a great answer in this Fiddle by Ariona Rian.

The problem is: if I get the image through ng-src, then how do I get the document element or the data to pass to the function getAverageRGB(imgEl)?

Here is a simple example. I am loading images from an array containing URLs. When the images are loaded, upon clicking on one of the images (the surrounding divs in fact), I would like to compute the average RGB value of the image that I click.

<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>

How do I write the function in the controller so that I can call the function that computes the average RGB?

It looks like I have to pass a canvas or some DOM element like that, but I could not understand how.

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

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

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

I tried to pass directly the img element through this call:

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

However, the function getAverageRGB() complains.

Community
  • 1
  • 1
user1472709
  • 133
  • 2
  • 14
  • what is it complaining about? – Ronnie Feb 05 '16 at 00:33
  • I got the following errors: "The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'" and then "Failed to execute 'drawImage' on 'CanvasRenderingContext2D'" on two different tries... – user1472709 Feb 05 '16 at 00:36
  • what does `angular.element( document.querySelector( elID ) );` equate to when you console.log it? and maybe try `elID = '#img_' + index` – Ronnie Feb 05 '16 at 00:40
  • On another note, I doubt wrapping it angular.element help. Try just the image: `var imgEl = document.querySelector( '#' + elID );` – Ronnie Feb 05 '16 at 00:42
  • im actually positive its the fact you don't have a `#` in front of your image id – Ronnie Feb 05 '16 at 00:43
  • You are right, I needed `'# + elID'` to get the element. When I do that then imgEl is an array containing the element. But I keep receiving _TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'_ – user1472709 Feb 05 '16 at 00:54
  • did you remove the `angular.element()` part? – Ronnie Feb 05 '16 at 00:58
  • No, should I? I will try it now and let you know. – user1472709 Feb 05 '16 at 00:59
  • yes. I think it is unnecessary – Ronnie Feb 05 '16 at 00:59
  • You are correct again. It was unnecessary. Now I am inside the function although I get as a response Object {r: 0, g: 0, b: 0} which is the default value. Something must be wrong inside, I'll investigate step by step. – user1472709 Feb 05 '16 at 01:03
  • cool, glad you're getting closer. I would just start doing some console.log()s and see what is happening – Ronnie Feb 05 '16 at 01:04
  • It fails when trying to do get the data from the image: `data = context.getImageData(0, 0, width, height);`. At this point it raises an exception. The width and height values are correct though. – user1472709 Feb 05 '16 at 01:07
  • hmm, the 0,0 are just starting x,y values. What does console.log(imgEl) in the function show you? It sounds like setting the `context` var is failing. What browser/version are you in? – Ronnie Feb 05 '16 at 01:10
  • hmm actually I dont know about context..you said it raises an exception..is there an error on the console? – Ronnie Feb 05 '16 at 01:12
  • This is what it shows `` – user1472709 Feb 05 '16 at 01:14
  • is `example.uk?img=0` actually an image? – Ronnie Feb 05 '16 at 01:15
  • It is a PNG image that I am getting from a server. If I put the URL in the browser it is displayed directly. However, I tried to receive it a few days ago through `$http.get` and the data that I received did not appear to be base64 but with strange symbols after the PNG header... – user1472709 Feb 05 '16 at 01:18
  • This is an example of content of the image obtained by typing `cat` on a shell: �PNG IHD�Z%IDATx�c8���1�j�LP���~�G5�j&���o�g�IEND�B`� – user1472709 Feb 05 '16 at 01:23

0 Answers0