почему я получаю увеличенное изображение в angularjs?

Question

Я использую средство просмотра изображений в угловой js. Я успешно внедрил средство просмотра изображений. Я не получил фактическое изображение, но получил увеличенное изображение, почему?

вот мой код http://plnkr.co/edit/eemTIHAON9T6nXf31D8C?p=preview

Получение этого вывода (увеличенное изображение)

Ожидание полного изображения без увеличения

app.controller ('MainCtrl', функция ($ scope, $ timeout) {

 $scope.ca='https://evportal.airtel.com/sharedimages/Postpaid/93c4e50b-10a7-4717-b976-592b74bc2d371541256937292_poa_front_image.jpeg'

})

Answer 1

Вам необходимо изменить параметр масштаба для изображения. Согласно ссылке «дать плункер», в файле app.js см. Строку №. 92, Вам нужно заменить currentScale = 1; на

currentScale = 0.1;

Это сделает ваше изображение таким, как вы ожидали.

Чтобы увидеть рабочий пример, перейдите по ссылке ниже.

http://plnkr.co/edit/Q7bvAr?p=preview

Answer 2

В функции resetImage () в app.js вы устанавливаете currentScale равным 1. Затем изображение будет нарисовано в масштабе 1: 1 на холсте. Вы не хотите этого, потому что таким образом изображение будет нарисовано в зависимости от его собственной ширины / высоты на холсте. Большие изображения будут отображаться в увеличенном виде, а маленькие изображения будут уменьшаться.

Вместо этого вы хотите инициализировать масштаб в зависимости от ширины / высоты входного источника, чтобы на холсте было нарисовано все изображение. Оптимальный способ сделать это так:

currentScale = Math.min(canvas.width/image.width, canvas.height/image.height);