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

在页面加载时，带有图像的画布必须等于浏览器的宽度，但画布的高度等于图像的自然高度。请访问此

我正在使用区域选择功能创建图像查看器，但问题是加载的画布的宽度和高度与图像的自然宽度和高度相同。因为这个画布看起来像放大模式。我希望画布和它完美匹配的图像应该等于浏览器宽度（没有水平滚动，垂直滚动就可以了）

若我想缩放画布，那个么水平滚动就会出现，那个就好了，因为若并没有滚动，就不可能看到不可见的区域。 我很容易做到，这只是我要做的一个基本想法

我访问了许多链接，找到了许多解决方案，但没有人为我工作

请注意，我不希望在画布中拉伸图像。

请帮帮我。提前谢谢

==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;
              });

var canvas=$（'canvas'）；
var context=canvas[0]。getContext（'2d'）；
var mousedown=false；
var imageObj=新图像（）；
imageObj.onload=函数（）{
$（画布）.attr({
宽度：这个。宽度，
高度：这个高度
});
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=[]；
函数drawRectangle（）{
context.beginPath（）；
context.rect（单击[0]。x，单击[0]。y，单击[1]。x单击[0]。x，单击[1]。y单击[0]。y）；
context.fillStyle='rgba（255235,59,0.5）'；
context.fill（）；
context.strokeStyle=“#df4b26”；
context.lineWidth=1；
stroke（）；
};
函数drawPoints（）{
context.strokeStyle=“#df4b26”；
//context.lineJoin=“round”；
context.lineWidth=5；
对于（var i=0；i

您需要使用css设置画布宽度，然后图像将加载到该大小，而不是其自然宽度/高度

在main.css（或任何您想要的css文件）中

请注意，根据“单击绘制”矩形的设置，可能需要调整某些内容以获得所绘制矩形的正确比例

---

我编辑了您的代码并将其放在这里：

我已经稍微修改了你的矩形绘图代码，使它可以使用你想要的任何画布大小。您可以在

或类似上面的css样式表中设置画布大小

---

但是如果您在css样式表中设置了宽度，这将覆盖直接在画布对象上写入的内容。

您需要使用css设置画布宽度，然后图像将加载到该大小，而不是其自然宽度/高度

在main.css（或任何您想要的css文件）中

请注意，根据“单击绘制”矩形的设置，可能需要调整某些内容以获得所绘制矩形的正确比例

---

我编辑了您的代码并将其放在这里：

我已经稍微修改了你的矩形绘图代码，使它可以使用你想要的任何画布大小。您可以在

或类似上面的css样式表中设置画布大小

---

但是如果您在css样式表中设置了宽度，这将覆盖您直接在画布对象上写入的任何内容。

我会像这样加载图像：

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:

---

我会像这样加载图像：

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:

---

谢谢兄弟，成功了：-）安图内斯，请帮我这个-托马斯·安图内斯，请帮我这个谢谢兄弟，成功了：-）安图内斯，请帮我这个-托马斯·安图内斯，请帮我这个@minididds，帮我这个@minididds，帮我这个-

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