Question

我试图仅导出clipTo区域，但是当我使用toDataUrl时，它只导出大约1/4的剪切区域和错误的坐标

测试用例

这是我的初始代码：

canvas = new fabric.Canvas('canvas', {
            fill: '#D4A076'
});
var setActiveProp = function(name, value) {
    var object = canvas.getActiveObject();
    if (!object) return;
    object.set(name, value).setCoords();
    canvas.renderAll();
}
var getActiveProp = function(name) {
    var object = canvas.getActiveObject();
    if (!object) return '';

    return object[name] || '';
}

var exportImg = function (x = null, y = null, w = null, h = null) {

    $.fancybox.close();
    var imgDataUrl = canvas.toDataURL({
        left: x,
        top: y,
        originX: 'center',
        originY: 'center',
        width: w,
        height: h,
        format: 'png'
    });

    //fabric.log('Normal SVG output: ', canvasContainer[side].toSVG());
    $.fancybox.open('<div class="message"><img  src="' + imgDataUrl + '"/></div>');

};
var $sideContainer = $('#canvas');
var cWidth = 900,
      cHeight = 600,
      x = 375,
      y = 225,
      w = 400,
      h = 300;
canvas.backgroundColor = '#222222';
canvas.clipTo = function (ctx) {
  ctx.rect(x, y, w, h);
  ctx.save();
};
canvas.renderAll();
exportImg(x,y,w,h);

这就是画布显示的方式

https://i.imgur.com/3rPcCV7.png

我的预期结果 https://i.imgur.com/cEhbodw.png

这是最终结果 https://i.imgur.com/fFg7ro1.png

结果图像仅显示源图像的1/4，提取尺寸但错误的坐标，3/4是透明的。我试图改变坐标，但没有运气。任何解决方案？

Fabricjs仅导出剪切区域

0 个答案: