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

Question

在页面加载时，带有图像的画布必须等于浏览器的宽度，但画布的高度等于图像的自然高度。请访问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;
}