холст drawimage рисовать увеличенное изображение

Мне нужно установить размер холста с помощью кода, а затем нарисовать изображение на этом холсте. Проблема нарисована, изображение увеличено.

следует код -

currentImageDIV = $("#cnv").css({ "position" : "relative" ,"height": 400, "width": 800,"top" :"100px" , "border": "1px solid red" });

var c = document.getElementById("cnv");
var ctx = c.getContext("2d");
ctx.imageSmoothingEnabled = false;

var img = new Image();
img.src = "/images/sample2.jpg";
img.onload = function () {
     ctx.drawImage(img, 0, 0); 
}

Если я не установлю размер холста, то изображение будет нарисовано, как и ожидалось, а не увеличено.

Как я могу контролировать размер холста без увеличенного изображения drawImage?


person S.L.    schedule 22.03.2017    source источник


Ответы (1)


Я обнаружил, что если я жестко запрограммирую ширину и высоту тега холста, масштабирование не произойдет.

Другим решением для этого является установка ширины и высоты с помощью prop, а не css (например, $("#cnv").prop({"width": 800, "высота": 600});)

person S.L.    schedule 22.03.2017