計算圖像3mm出血動態

Question

請幫我計算圖像的「流血」。

第一個問題：如何獲取動態圖像的尺寸？

第二個問題： Sombody知道什麼是流血計算？

我將圖像合併+流血指標.. （如果圖片是動態的，我需要的出血是動態的太...）

eg x-3=x, y-3=x

---

我有這樣的代碼，代表我想達到的目標。

Fiddle

HTML：

<canvas id="c"></canvas> 
<br> 
<div> 
    <button onclick="blue_square_2();return true;">Inner Square</button> 
    <button onclick="red_stroke_2();return true;">Outer Square</button> 
</div> 

JS：

var canvas = new fabric.StaticCanvas('c'); 
    canvas.setBackgroundImage('img/24-18-0.jpg', canvas.renderAll.bind(canvas)); 
    this.__canvases.push(canvas); 


    var c2 = document.getElementById("c"); 
    var c2_context = c2.getContext("2d"); 

    function blue_square_2() { //Green color square 
     canvas.add(new fabric.Rect({ 
      left: 250, 
      top: 300, 
      fill: "", 
      stroke: "green", 
      strokeWidth: 11.34, 
      width: 468, 
      height: 568, 
      opacity: 0.7 
     })); 
    } 

    function red_stroke_2() { //Blue color edges 
     canvas.add(new fabric.Rect({ 
      left: 250, 
      top: 300, 
      fill: "", 
      stroke: "blue", 
      strokeWidth: 11.34, 
      width: 489, 
      height: 589, 
      opacity: 0.7 
     })); 
    } 

Answer 1

//For someone who also have question like mine, this this is my own answer and calculations 

<img id="scream" src="back2.jpg" alt="The Scream" width="220px" height="277px"> 
     <canvas id="c" style="border:1px solid black;"></canvas> 

    <div> 
    <button onclick="blue_square_2();return true;">Blue Square</button> 
    <button onclick="green_stroke_2();return true;">Green Square</button> 
    <button onclick="clear_rect_2();return true;">Erase Everything</button> 
    </div> 
    <script type="text/javascript"> 
     // draw image 
     var canvas = new fabric.StaticCanvas('c'); 

     canvas.setBackgroundImage('back2.jpg', canvas.renderAll.bind(canvas)); 

     function getHeight(){ 
      return document.querySelector('img').naturalHeight; 
     } 
     function getWidth(){ 
      return document.querySelector('img').naturalWidth; 
     } 
     function setSize(x,y){ 
      width = x; 
      height = y; 
     } 
     function setCanvasSize(x,y){ 
      canvas.setWidth(x); 
      canvas.setHeight(y); 
      width = x; 
      height = y; 
     } 

     var sourceWidth = getWidth(); 
     var sourceHeight = getHeight(); 

     var targetWidth = 400; 
     var targetHeight = 200; 

     var sourceRatio = sourceWidth/sourceHeight; 
     var targetRatio = targetWidth/targetHeight; 
     var scale; 
     if (sourceRatio < targetRatio) { 
      scale = sourceWidth/targetWidth; 
     } else { 
      scale = sourceHeight/targetHeight; 
     } 

     var resizeWidth = parseInt((sourceWidth/scale)); 
     var resizeHeight = parseInt((sourceHeight/scale)); 

     // ctx.drawImage(img,0,0,width,height); 
     setCanvasSize(resizeWidth,resizeHeight); 
     console.log(height); 
     console.log(width); 

     if(width != getWidth()){ 
      linewidth = (11.34 * 9)/(getWidth()/width) ; 
      linewidth2 = linewidth/2; 
     } 
     console.log(linewidth); 
// fabric.Object.prototype.originX = true; fabric.Object.prototype.originY = true; 
     var c2 = document.getElementById("c"); 
     var ctx = c2.getContext("2d"); 
     var rect1 = new fabric.Rect({ 
      left: width/2, 
      top: height/2, 
      fill:"", 
      stroke:"green", 
      strokeWidth:linewidth, 
      width: width, 
      height: height, 
      opacity: 0.5 
     }); 
     console.log(linewidth); 
     var rect2 = new fabric.Rect({ 
      left: width/2 , 
      top: height/2 , 
      fill:"", 
      stroke:"blue", 
      strokeWidth:linewidth2, 
      width: width-(linewidth+linewidth2), 
      height: height-(linewidth+linewidth2), 
      opacity: 0.5 
     });