ファブリックjsを使用したキャンバスでのイメージスケーリング

Question

Please check attached screenshot setFillを使用してイメージをsvgイメージに設定しました。イメージが設定されると、イメージの幅や高さを変更したり、操作を実行したりする必要があります。キャンバス上でユーザーがsvgを選択すると、イメージオブジェクトを塗りつぶす方法を教えてください。

Answer 1

スケーリング：

 image.on('scaling', function (opt) { 

     var r = canvas.getRetinaScaling(); 
     var sX = Math.abs(this.scaleX) * r; 
     var sY = Math.abs(this.scaleY) * r; 

     canvas.setWidth(image.width * sX); 
     canvas.setHeight(image.height * sY); 

     canvas.renderAll(); 
    }); 



    $("#save1").click(function() { 



var arrFormat = g_filename.split('.'); 
var arrFilename = g_filename.split('/'); 
var filename; 
var format; 

if (arrFormat.length == 1) 
    format = "image/" + "jpg"; 
else { 
    format = "image/" + arrFormat[arrFormat.length - 1]; 
} 

if (arrFilename == 1) 
    filename = g_filename; 
else { 
    filename = arrFilename[arrFilename.length - 1]; 
} 


var serverUrl = "/Home/UploadImg5"; 
var imageName = filename; 

// 이미지를 첫번째것을 가져온다. 
var obj = canvas.item(0); 


var width = Math.abs(image.width * image.scaleX); 
var height = Math.abs(image.height * image.scaleY); 



var dataURL = canvas.toDataURL({ format: format, left: obj.left, top: obj.top, width: width/ratio, height: height/ratio }); 

canvas.discardActiveObject(); 
canvas.renderAll(); 

$.ajax({ 
    type: 'POST', 
    url: serverUrl, 
    data: { 
     title: imageName, 
     type: "jpg", 
     image: dataURL // Step 1에서 가져온 데이터 
    } 
}).done(function() { 

    console.log('saved!'); 
});