Changing image src

Ionic Framework ionic-v3
1

Hi All,

I’m trying to change an image to grey when I click on it. I have the following code, which is from another forum, so I think it works on standard html images. However, I cannot seem to get it to work with my Ionic 2 implementation.

The grey function does return a new src, but it isn’t applied to the image. When I view the image, it has a src and ng-reflect-src, but these are not updated.

Any suggestions appreciated.

html

  <ion-row *ngFor="let trio of getTriples()">
    <ion-col *ngFor="let item of trio" (click)="itemTapped(item)">
      <div class="row responsive-md">
        <div id="icon-image-{{item.id}}"><img src="data:image/png;base64,{{item.icon}}" height="75" width="75" /></div>
      </div>
    </ion-col>
  </ion-row>

typescript

  itemTapped(subCategoryModel: SubCategoryModel) {
    let divEl:HTMLElement = document.getElementById('icon-image-'+subCategoryModel.id);
    let imgEl:HTMLImageElement = divEl.getElementsByTagName('img')[0];
    imgEl.src = this.grey(imgEl);
  }

and

grey(imgObj) {
    var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');

    var imgW = imgObj.width;
    var imgH = imgObj.height;
    canvas.width = imgW;
    canvas.height = imgH;

    canvasContext.drawImage(imgObj, 0, 0);
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

    for (var y = 0; y < imgPixels.height; y++) {
      for (var x = 0; x < imgPixels.width; x++) {
        var i = (y * 4) * imgPixels.width + x * 4;
        var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
        imgPixels.data[i] = avg;
        imgPixels.data[i + 1] = avg;
        imgPixels.data[i + 2] = avg;
      }
    }
    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
  }