画布宽度必须等于窗口的宽度，但高度应等于图像的自然高度

Question

在页面加载，画布图像必须等于浏览器的宽度，但画布的高度等于图像的自然height.kindly访问这个https://jsfiddle.net/amitv1093/8yo3rLh1/

我使用区域选择功能创建图像查看器，但问题是加载画布的宽度和高度与图像的自然宽度和高度相同。因为这个画布看起来像放大模式。我想要那个画布和它完美合适的图像应该等于浏览器宽度（没有水平滚动，垂直滚动很好）。

如果我想放大画布，那时候会出现水平滚动，那样会很好，因为没有滚动就不可能看到隐形区域。 我会很容易做到这一点，这只是我要做的一个基本想法。

我访问了很多链接，发现了很多解决方案，但没有人为我工作。

请注意，我不想在画布内拉伸图像。

请帮帮我。提前致谢。

== == HTML

<canvas ></canvas> 

== ==的js

var canvas = $('canvas'); 
      var context = canvas[0].getContext('2d'); 
      var mousedown = false; 
      var imageObj = new Image(); 

      imageObj.onload = function() { 


       $(canvas).attr({ 
       width : this.width, 
       height: this.height 
       }); 
       context.drawImage(imageObj,0,0); 
      }; 
      imageObj.src = 'https://www.livecareer.com/images/uploaded/resume-example-home/web-developer-resume-example-emphasis-2-expanded-2.png'; 

      var clicks = []; 

      function drawRectangle(){ 
       context.beginPath(); 
       context.rect(clicks[0].x, clicks[0].y, clicks[1].x-clicks[0].x, clicks[1].y-clicks[0].y); 
       context.fillStyle = 'rgba(255,235,59,0.5)'; 
       context.fill(); 
       context.strokeStyle = "#df4b26"; 
       context.lineWidth = 1; 
       context.stroke(); 
      }; 

      function drawPoints(){ 
       context.strokeStyle = "#df4b26"; 
       //context.lineJoin = "round"; 
       context.lineWidth = 5; 

       for(var i=0; i < clicks.length; i++){ 
       context.beginPath(); 
       context.arc(clicks[i].x, clicks[i].y, 3, 0, 2 * Math.PI, false); 
       context.fillStyle = '#ffffff'; 
       context.fill(); 
       context.lineWidth = 5; 
       context.stroke(); 
       } 
      }; 

      function redraw(){ 
       canvas.width = canvas.width; // Clears the canvas 
       context.drawImage(imageObj,0,0); 

       drawRectangle(); 
       drawPoints(); 
      }; 

      canvas 
       .mousedown(function (e) { 
       clicks[0] = { 
        x: e.offsetX, 
        y: e.offsetY 
       }; 
       mousedown = true; 
       }) 
       .mousemove(function (e) { 
       if (mousedown) { 
        clicks[1] = { 
        x: e.offsetX, 
        y: e.offsetY 
        }; 
        redraw(); 
       } 
       }) 
       .mouseup(function (e) { 
       mousedown = false; 
       clicks[1] = { 
        x: e.offsetX, 
        y: e.offsetY 
       }; 
       }) 
       .mouseleave(function (event) { 
       mousedown = false; 
       }); 

Answer 1

你需要使用CSS来设置你的画布宽度，然后图像会加载到大小，而不是它的自然宽度/高度。

在main.css的（你想或任何CSS文件）

canvas { 
    width: 80%; //can be 80vw, 500px, whatever you want 
} 

请注意，根据您的点击如何绘制矩形设置，您可能需要调整一些东西来得到正确的刻度你画的矩形。

---

我已经编辑你的代码，并把它放在这里：https://jsfiddle.net/odnkaha4/3/

我已经略有改变您的矩形绘图代码，以便它与任何你想要的画布大小的作品。您可以在<canvas width=800><canvas>或上面的CSS样式表中设置画布大小。

但是，如果你确实在CSS样式表中设置了一个宽度，这将覆盖你直接写在画布对象上的任何东西。

Answer 2

我将加载这样的形象：

imageObj.onload = function() { 
    var cw = $('body').width(); 
    var ch = Math.floor((cw * this.height)/this.width); 

    this.width = cw; 
    this.height = ch; 

    canvas[0].width = cw; 
    canvas[0].height = ch; 
    context.drawImage(imageObj,0,0,cw,ch); 
}; 

CSS：

body { 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden; 
}