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

Answer 2

检查Fabric.js URL，以更好地理解。参见：link

用布料js在画布上缩放图像

2 个答案: