畫布寬度必須等於窗口的寬度，但高度應等於圖像的自然高度

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