HTML5 canvas: изменение размера изображения

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

Трохоид прав, атрибут style на тэге 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

Попробуйте использовать эту библиотеку, которую я недавно создал, которая может загружать изображение, изменять его размер, фиксированную ширину и высоту или приоритет, конвертировать в другие форматы, такие как 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

Надеюсь, это вам поможет!

Answer 5

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

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