Fabric toDataUrl，乘数不按预期工作

Question

在我的代码中，我创建了使用结构形状剪辑图像的方法。我已经使用stackoverflow答案来实现这一目标。在使用此方法后，我无法使用默认的结构画布渲染方法渲染画布。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的问题是乘数。 使用这种clipTo函数时，您将canvas的变换设置为plain。使用带有乘数的画布进行渲染时，基础画布变换将通过乘数进行缩放。

您的rect将在没有此变换的情况下绘制（因为setTransform（1,0,0,1,0,0）并将剪切掉图像。

不应将变换设置为[1,0,0,1,0,0]，而应将其设置为要裁剪的对象的当前变换的反转。

＆＃13;

＆＃13;

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;

＆＃13;

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

＆＃13;

<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" >

＆＃13;

＆＃13;

＆＃13;