Javascript 动态计算图像质量

请帮我计算图像的“出血”

第一个问题：如何获取动态图像的尺寸

第二个问题：Sombody知道出血的计算方法是什么

我将组合图像+出血指示灯。。 （如果图片是动态的，我需要出血也是动态的…）

例如x-3=x，y-3=x

---

我有这段代码，它代表了我想要实现的目标

HTML:

//对于像我这样有问题的人，这是我自己的答案和计算
蓝色广场
绿色广场
抹去一切
//画图
var canvas=newfabric.StaticCanvas（'c'）；
setBackgroundImage（'back2.jpg'，canvas.renderal.bind（canvas））；
函数getHeight（）{
返回文档。查询选择器（'img'）。自然高度；
}
函数getWidth（）{
返回文档.querySelector（'img'）.naturalWidth；
}
函数设置大小（x，y）{
宽度=x；
高度=y；
}
函数设置画布大小（x，y）{
canvas.setWidth（x）；
画布设置高度（y）；
宽度=x；
高度=y；
}
var sourceWidth=getWidth（）；
var sourceHeight=getHeight（）；
var targetWidth=400；
var targetHeight=200；
var sourceRatio=源宽/源高；
var targetRatio=目标宽度/目标高度；
var量表；
if（源比率<目标比率）{
比例=源宽度/目标宽度；
}否则{
比例=源高度/目标高度；
}
var resizeWidth=parseInt（（sourceWidth/scale））；
var resizeHeight=parseInt（（sourceHeight/scale））；
//ctx.drawImage（img，0,0，宽度，高度）；
设置画布大小（resizeWidth、resizeHeight）；
控制台。原木（高度）；
控制台。原木（宽度）；
if（width！=getWidth（））{
线宽=（11.34*9）/（getWidth（）/宽度）；
线宽2=线宽/2；
}
console.log（线宽）；
//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（{
左：宽度/2，
顶部：高度/2，
填写：“，
笔画：“绿色”，
笔划宽度：线宽，
宽度：宽度，
高度:高度,，
不透明度：0.5
});
console.log（线宽）；
var rect2=new fabric.Rect（{
左：宽度/2，
顶部：高度/2，
填写：“，
笔画：“蓝色”，
笔划宽度：线宽2，
宽度：宽度-（线宽+线宽2），
高度：高度-（线宽+线宽2），
不透明度：0.5
});

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

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

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