How to resize an image on page output using Angularjs?

Question

MySQL

In the process of creating an online store on angularjs, there was a problem with changing the size of the product image when displayed on the page. In my case, I need to dynamically resize the photo depending on which view form is used: list, grid, detail-info (product page). I tried to make canvas, but somehow it doesn't work:

<tbody ng-show="shows==1">
                <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                    <td><img class="ngImage" ng-src="{{resize_img(data.image)}}">//data.image - Название фотографии полученное с базы данных
                    </td>
                    <td>{{data.price}}</td>
                    <td>{{data.seo_words}}</td>
                    <td>{{data.model}}</td>
                    <td>{{data.description}}</td>
             </tr>
            </tbody>

Method used for compression:

$scope.resize_img = function(picture) {
      var img = new Image();
      img.onload = function() {
        var c = $(".ngImage").attr('src','./upload_images/picture');
        var ctx = c.getContext("2d");
        ctx.drawImage(img, 150, 150);
        $('.ngImage').attr('src', canvas.toDataURL("image/jpeg"));
      };
    };

Answer 1

In my case, I need to dynamically resize the photo depending on which view form is used: list, grid, detail-info (product page)

Well, do it with CSS. Each image, depending on the view form, assign the desired class, and specify the size in CSS.