HTML5 холст: изменение размера изображения

Question

Я пытаюсь разместить изображение на холсте без изменения его размера. Я думал, что drawImage (img, x, y) сделает трюк, но он растягивает изображение, чтобы заполнить холст. Кроме того, поставка drawImage (img, x, y, width, height) с размерами моего изображения не работает.

Вот мой код:

<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas> 

<script type="text/javascript"> 

window.onload = function() { 
    var canvas = document.getElementById("story"); 
    var context = canvas.getContext("2d"); 
    var img = document.getElementById("img1"); 
    var width = parseInt(img.width); 
    var height = parseInt(img.height); 
    context.drawImage(img, 0, 0, width, height); 
} 

</script> 
<img id="img1" alt="" src="http://link to image"/> 

Заранее спасибо!

PS: Я добавил parseInt, чтобы удостовериться, что drawImage получает действительные значения.

Answer 1

Не используйте CSS для вашего холста. Это создает холст размера по умолчанию и растягивает его. Задайте размеры холста непосредственно на нем, и вы получите пространство от 1 до 1 пикселя.

<canvas id="story" width="800" height="600" style="position:relative;"></canvas> 

Answer 2

Trochoid прав, атрибут стиля на тэге canvas вызывает проблемы. Вы можете установить его в HTML, как он говорит, или еще лучше вы можете оставить это поле пустым и установить его динамически в JS:

<canvas id="story"></canvas> 

<script type="text/javascript"> 

window.onload = function() { 
     var canvas = document.getElementById("story"); 
     var context = canvas.getContext("2d"); 
     var img = document.getElementById("img1"); 
     var width = parseInt(img.width); 
     var height = parseInt(img.height); 

     canvas.height=height; 
     canvas.width=width; 
     context.drawImage(img, 0, 0); 
} 

</script> 
<img id="img1" alt="" src="http://link to image"/> 

Answer 3

Также убедитесь, что вы получите ширину и высоту изображения и сделать его ПОСЛЕ загрузки.

img.onload = function() { 
    var width = parseInt(img.width); 
    var height = parseInt(img.height); 
    context.drawImage(img, 0, 0, width, height); 
}; 

Answer 4

Вы должны сначала загрузить функцию изображения отлично перед визуализацией на экране, чтобы сделать это следовать код ниже ..

<img id="demo-img" src="image_name.png"> 

<br> 

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3">Your browser does not support the HTML5 canvas tag 
</canvas> 

<script> 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("demo-img"); 
    img.onload=function fun(){ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height)} 
</script> 

Answer 5

Попробуйте использовать эту библиотеку я недавно созданный в который можно загрузить изображение, изменить размер фиксированной ширины & Высота или предварительный уровень, конвертировать в и из других форматов, таких как base64 или blob, и позволяет применять водяной знак.

var CanvaWork = new CanvaWork(); 

CanvaWork.loadImage("yourimage.png", function(obj){ 
    console.log(obj.canvas); // The usable canvas 
    console.log(obj.width); 
    console.log(obj.height); 
    console.log(obj.image); // Contains the image file 
}); 

https://github.com/vnbenny/canvawork.js

Надеется, что это помогает!