結構toDataUrl乘數不能按預期工作

Question

在我的代碼中，我創建了使用結構形狀剪裁圖像的方法。我已經使用stackoverflow答案來實現這一點。不知何故，在使用此方法後，我無法使用默認結構畫布渲染方法呈現畫布。

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的變換設置爲plain。當使用乘數進行畫布渲染時，基本畫布變換由乘數縮放。

您的矩形將沒有這個變換（因爲一個setTransform（1,0,0,1,0,0），並會剪輯出的圖像。

繪製而不是設置變換設置爲[1,0 ，0,1,0,0]你應該設置爲你剪裁對象的當前變換的INVERS

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