动态计算图像3mm出血

calculate image 3mm bleed dynamically

本文关键字：出血 3mm 图像计算动态更新时间：2023-09-26

请帮我计算一下图像的'出血'

第一个问题:如何获得动态图像的尺寸?

第二个问题:有人知道出血的计算方法吗?

我将结合图像+出血指示器。(如果图片是动态的，我需要流血也是动态的…)

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

我有这段代码代表我想要实现的目标。

小提琴

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

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