带乘数的 Fabric toDataUrl 无法按预期工作

Question

在我的代码中，我创建了使用织物形状裁剪图像的方法。我已经使用 Whosebug 答案来实现这一点。使用此方法后，我无法使用默认结构 canvas 渲染方法渲染 canvas。

var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';

var canvas = new fabric.Canvas('c');

document.getElementById('download').addEventListener('click', function() {
  canvas.renderAll();
  this.href = canvas.toDataURL({
    format: 'png',
    multiplier: 2        
  });
  this.download = "test.png";
}, false);

var clipRect1 = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    angle: 90,
    left: 195,
    top: 0,
    width: 200,
    height: 200,
    fill: '#DDD', /* use transparent for no fill */
    strokeWidth: 1,
    lockMovementX: true,
    lockMovementY: true,
    angle: 5,
    stroke: 'red'
});

var pugImg = new Image();
pugImg.onload = function (img) {    
    var pug = new fabric.Image(pugImg, {
        angle: 0,
        width: 500,
        height: 500,
        left: 245,
        top: 35,
        scaleX: 0.3,
        scaleY: 0.3,
        clipName: 'pug',
        clipTo: function(ctx) { 
            ctx.save();
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            clipRect1.render(ctx);
            ctx.restore();
        }
    });
    canvas.add(pug);
};
pugImg.src = img02URL;
pugImg.setAttribute('crossOrigin', 'anonymous');

#c {
    border:0px solid #ccc;
}

<script src="//cdn.bootcss.com/fabric.js/1.5.0/fabric.js"></script>
<canvas id="c" width="500" height="400"></canvas>
<a id="download">Download as image</a>

Answer 1

你的问题是乘数。使用那种 clipTo 函数时，您将 canvas 的转换设置为普通。使用乘数 canvas 进行渲染时，基础 canvas 变换会按乘数缩放。

你的矩形将在没有这个变换的情况下绘制（因为 setTransform(1,0,0,1,0,0) 并且会剪掉图像。

与其将变换设置为 [1,0,0,1,0,0]，不如将变换设置为您正在剪辑的对象的当前变换的反转。

var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';

var canvas = new fabric.Canvas('c');

document.getElementById('download').addEventListener('click', function() {
  var data = canvas.toDataURL({
    format: 'png',
    multiplier: 2        
  });
  console.log(data);
  //var img = document.getElementById('export');
  //img.src = data;
}, false);

var clipRect1 = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    angle: 90,
    left: 195,
    top: 0,
    width: 200,
    height: 200,
    fill: '#DDD', /* use transparent for no fill */
    strokeWidth: 1,
    lockMovementX: true,
    lockMovementY: true,
    stroke: 'red',
    angle: 5
});



var pugImg = new Image();
pugImg.onload = function (img) {    
    var pug = new fabric.Image(pugImg, {
        angle: 0,
        width: 500,
        height: 500,
        left: 245,
        top: 35,
        scaleX: 0.3,
        scaleY: 0.3,
        clipName: 'pug',
        clipTo: function(ctx) { 
            ctx.save();
            var myMatrix = this.calcTransformMatrix();
            myMatrix = fabric.util.invertTransform(myMatrix);
            ctx.transform.apply(ctx, myMatrix);
            clipRect1.render(ctx);
            ctx.restore();
        }
    });
    canvas.add(pug);
};
pugImg.src = img02URL;

#c {
    border:0px solid #ccc;
}

<script src="//www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="c" width="500" height="400"></canvas>
<a id="download">Download as image</a>
<img id="export" >

带乘数的 Fabric toDataUrl 无法按预期工作

Fabric toDataUrl with multiplier not working as expected

html5-canvas

fabricjs