Задать вопрос
@WELES333
Студент, специальность "Информатика".

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

В процессе создания интернет магазина на 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"));
      };
    };
  • Вопрос задан
  • 392 просмотра
Подписаться 1 Оценить 2 комментария
Решения вопроса 1
yarkov
@yarkov
Помог ответ? Отметь решением.
В моем случае нужно менять динамически размеры фото зависимо от того какая форма просмотра используется: list, grid, detail-info(страничка продукта)

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

Войдите, чтобы написать ответ

Похожие вопросы