Как изменить размер изображения при выводе на страницу с помощью Angularjs?

Question

[Василий Демянюк]

В процессе создания интернет магазина на angularjs, появилась проблема изменения размера изображения продукта при выводе на страницу. В моем случае нужно менять динамически размеры фото зависимо от того какая форма просмотра используется: list, grid, detail-info(страничка продукта). Я пробовал делать canvas, но как-то не получаться:

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

Метод, используемый для сжатия:

$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"));
      };
    };

Comments

[Василий Демянюк]

P.S. Я понимаю, что можно было бы сделать это с помощью php загружая фотографии на сервер, но мне хотелось бы иметь только по одному экземпляру каждой фотографии, тем более, что все фотографии уже на сервере. Да, и не спрашивайте, почему я делаю магазин на angularJS.

[Павел Аксенов]

Василий Демянюк: А что если у картинки прописать высоту и ширину 100%

Answer 1

[Алексей Ярков]

В моем случае нужно менять динамически размеры фото зависимо от того какая форма просмотра используется: list, grid, detail-info(страничка продукта)

Ну так и сделайте с помощью CSS. Каждой картинке, в зависимости от формы просмотра присвойте нужный класс, а в CSS укажите размер.

Comments

[Василий Демянюк]

Вот я тупой. Спасибо большое.