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样式表中设置了一个宽度，这将覆盖你在canvas对象上直接写的任何内容。

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

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

2 个答案: