context.drawImage 完整语法的 Fabricjs 替代品是什么？

Question

我正在尝试使用 fabricjs 渲染图像并进行一些处理。当涉及到 canvas 上的正常渲染时，我可以使用它，但在 FabricJS 的情况下我失败了：这是没有 fabricjs 的 canvas 代码：

裁剪图像并将裁剪的部分放在 canvas 上： JavaScript 语法：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

如何使用 FabricJS 实现同样的效果？

    hiddenContext.putImageData(imageDataArr, 0, 0);
    var hc = document.getElementById(hid);
    //assigning last working canvas.
    LWC = CWC;
    CWC = fabricFH;
    CWC.backgroundColor = "white";
    CWC.add(new fabric.Image(hc, 
    {
        alignX : "mid",
        alignY : "mid",
        selectable : false, 
        hasBorders : false,
        hasControls : false, 
        hasRotatingPoint : false,
        lockUniScaling: true,
        centeredScaling: true,
        scaleX: $("#"+activeCanvas).find("canvas").get(0).width/hc.width,
        scaleY: $("#"+activeCanvas).find("canvas").get(0).height/hc.height,
    }
    ));

上面的代码让我可以保持宽高比并完美渲染到 canvas，但是我失去了图像质量，因为我的 canvas 是 1000*800 而图像是 2130*1800。

你能帮我根据实际图像以精确质量渲染图像吗？

Answer 1

试试这个：

var canvas = new fabric.Canvas('canvas');
var img = new Image();
img.src = 'http://i2.ooshirts.com/images/lab_shirts/Cobalt-1-F.jpg';
var imgInstance = new fabric.Image(img, {
            left: 10,
            top: 10,
            angle: 0,
            width:300,
            height:240,
            clipTo: function(ctx){
                ctx.rect(-100,-100,200,200);              
               }
        });
canvas.add(imgInstance);
canvas.renderAll();

如果我们想将其映射为：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); where

img=Specifies the image , 
sx= Optional. The x coordinate where to start  clipping,
sy= Optional. The y coordinate where to start  clipping,
swidth= Optional. The width of the clipped image,   
sheight= ptional. The height of the clipped image,  
x= The x coordinate where to place the image on the canvas, 
y= The y coordinate where to place the image on the canvas, 
width= Optional. The width of the image to use,
height= Optional. The height of the image to use     then

   fabric img <=> img
   clipTo->ctx.rect <=> sx,sy,swidth,sheight,
   left <=> x,
   top <=> y,
   width <=> width ,
   height <=> height

希望现在一切都清楚了:)

context.drawImage 完整语法的 Fabricjs 替代品是什么？

What is Fabricjs alternative for context.drawImage full syntax?

javascript

canvas

fabricjs