使用fabric js在画布上缩放图像答案

【问题标题】：Image scaling on canvas with fabric js使用fabric js在画布上缩放图像
【发布时间】：2018-03-20 06:42:02
【问题描述】：

Please check attached screenshot 我已经使用 setFill 将图像设置为 svg 图像。图像设置好后，我必须更改宽度、高度或对图像执行操作。当用户在画布上选择 svg 时如何获取填充图像对象。

【问题讨论】：

标签： image canvas svg scaling

【解决方案1】：

检查Fabric.js URL 以获得更好的理解。见：link

【讨论】：

【解决方案2】：

缩放：

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

【讨论】：