Mise à l'échelle de l'image sur toile avec le tissu js

Question

Please check attached screenshot J'ai défini l'image en utilisant setFill pour l'image svg. Une fois l'image réglée, je dois changer la largeur, la hauteur ou effectuer une opération sur l'image. Comment je peux obtenir l'objet image de remplissage quand l'utilisateur sélectionne svg sur la toile.

Answer 1

mise à l'échelle:

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