html 画出扭曲的图像[复制]

taor4pac 于 2023-06-27 发布在其他

关注(0)|答案(1)|浏览(142)

此问题已在此处有答案：

Canvas is stretched when using CSS but normal with width & height attributes（10个答案）
4天前关闭。

HTML

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>A Basic HTML5 Template</title>

  <link rel="stylesheet" href="css/main-1.css">
  <section id="fitting-room-section">
    <canvas class="n-canvas" id="fitting-room-canvas"></canvas>
  </section>  
  
  
  <button type="button" class="n-button">Click Me!</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  
  
</head>

<body>
  <!-- your content here... -->
  
  <script src="js/script-1.js"></script>
</body>
</html>

CSS：

.n-canvas {
    width: 100%;
    height: 100%;
    max-width: 300px;
    min-height: 400px;  
    background-color: red;
}

JS：

$( document ).ready(function() {    

    function drawImageScaled() {    
        let canvas = document.getElementById('fitting-room-canvas');    
        let ctx = canvas.getContext('2d');
    
        let img = new Image();
        img.src = 'img/bob.png';    
    
        img.onload = function(){
          let imgWidth = canvas.width * (2 / 3); // Image width occupies two-thirds of the canvas width.
          var ratio = imgWidth / img.width; // How much we shall shrink the image.
          let imgHeight = img.height * ratio; // Shrink the image hight as much as the image width.       
          ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
        }
      }
    
    jQuery( ".n-button" ).on( "click", drawImageScaled);
    
    console.log( "ready!" );
});

问题

发型是扭曲的。我只是想按比例缩小它然后画出来。我的算术似乎没问题。尽我所能。
我对问题原因的推测是画布实际上是400。但在JavaScript中，它以某种方式被确定为150。这可能是导致失真的原因。
不管怎样，你能帮我吗？

Html

来源：https://stackoverflow.com/questions/76524379/a-distorted-image-is-drawn

1条答案

按热度按时间

3bygqnnd1#

删除max-width: 300px;或min-height: 400px;，并将width和height添加到画布

$(document).ready(function() {

  function drawImageScaled() {
    let canvas = document.getElementById('fitting-room-canvas');
    let ctx = canvas.getContext('2d');

    let img = new Image();
    img.src = 'https://i.stack.imgur.com/4tltn.png';

    img.onload = function() {
      let imgWidth = canvas.width * (2 / 3); // Image width occupies two-thirds of the canvas width.
      var ratio = imgWidth / img.width; // How much we shall shrink the image.
      let imgHeight = img.height * ratio; // Shrink the image hight as much as the image width.       
      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
    }
  }

  jQuery(".n-button").on("click", drawImageScaled);

});

.n-canvas {
  width: 100%;
  height: 100%;
  max-width: 300px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="fitting-room-section">
  <canvas width="300" height="400" class="n-canvas" id="fitting-room-canvas"></canvas>
</section>

<button type="button" class="n-button">Click Me!</button>

附注：您的html无效。您的标签应该在<body>中，而不是在<head>中

赞(0）回复(0）举报 2023-06-27

我来回答

html 画出扭曲的图像[复制]

1条答案

相关问题

热门标签

最新问答