我正在尝试使用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。
你能帮我按照实际图像的精确质量渲染图像吗?
最佳答案
试试这个:
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
希望现在一切都清楚了:)
关于javascript - Fabricjs 的 context.drawImage 完整语法替代方案是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33315217/