刪除控制箱和圖像之間的填充。 Fabric.js

Question

裁剪後無法在控制框和圖像之間移除填充。 那是我做的：

1. 附加圖像在畫布上
2. 規模
3. DBLCLICK
4. 添加新的矩形
5. 計算PARAMS
6. 剪裁

我試圖設置modifiedObject.padding = 0但它沒有工作

ERB：

<div class="container"> 
    <div id="canvas-container" class="box"> 
    <canvas id="canvas" width="700" height="400"></canvas> 
    </div> 

    <div class="collection box"> 
    <% (1..3).each do |i| %> 
     <div class="item"><%= image_tag "#{i}.jpg", width: 140 %></div> 
    <% end %> 
    </div> 
</div> 

<div class="toolbar box"> 
    <button id="removePadding">Remove padding</button> 
    <button id="crop">Crop</button> 
    <button id="saveAsJpg">Save as .jpg</button> 
    <button id="deleteItem">Delete image</button> 
    <button id="clearBackground">Remove background</button> 
    <input id="bgImage" type="file" name="file" onchange="onFileSelected(event)" value="Change background" /> 
</div> 

JS：

var canvas = new fabric.Canvas('canvas'); 
var timeClicked = []; 
var imageObject; 
var selectedObject; 
var selectArea; 

$("#removePadding").click(function() { 
    selectedObject.set({padding: 0}); 
    canvas.renderAll(); 
}); 

$("#saveAsJpg").click(function() { 
    window.open(canvas.toDataURL('jpg')); 
}); 

$("#deleteItem").click(function() { 
    canvas.isDrawingMode = false; 
    deleteObjects(); 
}); 

$("#clearBackground").click(function() { 
    canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas)); 
    $("#bgImage").val(""); 
}); 

$("#crop").click(function() { 
    var left = selectArea.left - imageObject.left; 
    var top = selectArea.top - imageObject.top; 

    var width = selectArea.width; 
    var height = selectArea.height; 
    var scaleX = selectArea.scaleX; 
    var scaleY = selectArea.scaleY; 

    imageObject.clipTo = function(ctx) { 
    ctx.rect(
     - (width/2) + left, 
     - (height/2) + top, 
     parseInt(width * scaleX), 
     parseInt(height * scaleY) 
    ); 
    } 

    imageObject.width = width; 
    imageObject.height = height; 

    canvas.remove(selectArea); 
    canvas.renderAll(); 
}); 

// EVENTS 
canvas.on("object:selected", function(ev) { 
    selectedObject = ev.target; 
}); 

canvas.on("mouse:down", function(ev) { 
    timeClicked.push({ time: new Date().getTime() }); 
}); 

canvas.on("mouse:up", function(ev, target) { 
    var clickEvents = timeClicked.slice(-2).reverse(); 

    if(clickEvents.length == 2) { 
    var dblClickTime = clickEvents[0].time - clickEvents[1].time; 
    if(dblClickTime < 200 && ev.target) { 
     canvas.fire('object:dblclick', { target: ev.target }); 
    } 
    } 
}); 

canvas.on("object:dblclick", function(ev) { 
    canvas.remove(selectArea); 

    imageObject = ev.target; 

    fabric.Image.fromURL(ev.target._originalElement.currentSrc, function(img) { 
    img.left = imageObject.left; 
    img.top = imageObject.top; 
    img.width = imageObject.getWidth(); 
    img.height = imageObject.getHeight(); 
    img.borderColor = 'red'; 
    img.cornerColor = 'white'; 
    img.cornerSize = 8; 
    canvas.add(img); 
    canvas.remove(imageObject); 
    imageObject = img; 
    canvas.renderAll(); 
    }); 

    selectArea = new fabric.Rect({ 
    fill: 'rgba(0,0,0,0.3)', 
    originX: 'left', 
    originY: 'top', 
    stroke: '#ccc', 
    strokeDashArray: [2, 2], 
    opacity: 1, 
    width: 1, 
    height: 1, 
    borderColor: 'red', 
    cornerColor: 'white', 
    hasRotatingPoint: false, 
    cornerSize: 8 
    }); 

    selectArea.left = imageObject.get('left'); 
    selectArea.top = imageObject.get('top'); 
    selectArea.width = imageObject.get('width') * imageObject.get('scaleX'); 
    selectArea.height = imageObject.get('height') * imageObject.get('scaleY'); 

    canvas.add(selectArea); 
    canvas.setActiveObject(selectArea); 
}); 

function deleteObjects(){ 
    imageObject = canvas.getActiveObject(); 
    var activeGroup = canvas.getActiveGroup(); 
    if (imageObject) { 
    canvas.remove(imageObject); 
    } 
    else if (activeGroup) { 
    var objectsInGroup = activeGroup.getObjects(); 
    canvas.discardActiveGroup(); 
    objectsInGroup.forEach(function(object) { 
     canvas.remove(object); 
    }); 
    } 
} 

function handleDragStart(e) { 
    [].forEach.call(images, function(img) { 
    img.classList.remove('img_dragging'); 
    }); 
    this.classList.add('img_dragging'); 
} 

function handleDragOver(e) { 
    if (e.preventDefault) { 
    e.preventDefault(); 
    } 
    e.dataTransfer.dropEffect = 'copy'; 
    return false; 
} 

function handleDragEnter(e) { 
    this.classList.add('over'); 
} 

function handleDragLeave(e) { 
    this.classList.remove('over'); 
} 

function handleDrop(e) { 
    if (e.stopPropagation) { 
    e.stopPropagation(); 
    } 

    var img = document.querySelector('.collection img.img_dragging'); 
    var newImage = new fabric.Image(img, { 
    width: img.width, 
    height: img.height, 
    left: e.layerX, 
    top: e.layerY, 
    borderColor: 'white', 
    cornerColor: 'white', 
    cornerSize: 8 
    }); 
    canvas.add(newImage); 
    return false; 
} 

function handleDragEnd(e) { 
    [].forEach.call(images, function(img) { 
    img.classList.remove('img_dragging'); 
    }); 
} 

function onFileSelected(e) { 
    var file = e.target.files[0]; 
    var reader = new FileReader(); 

    reader.onload = function (f) { 
    var data = f.target.result; 
    fabric.Image.fromURL(data, function (img) { 
     canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), { 
     width: canvas.getWidth(), 
     height: canvas.getHeight() 
     }); 
    }); 
    }; 
    reader.readAsDataURL(file); 
} 

var images = document.querySelectorAll('.collection img'); 
[].forEach.call(images, function(img) { 
    img.addEventListener('dragstart', handleDragStart, false); 
    img.addEventListener('dragend', handleDragEnd, false); 
}); 

var canvasContainer = document.getElementById('canvas-container'); 
canvasContainer.addEventListener('dragenter', handleDragEnter, false); 
canvasContainer.addEventListener('dragover', handleDragOver, false); 
canvasContainer.addEventListener('dragleave', handleDragLeave, false); 
canvasContainer.addEventListener('drop', handleDrop, false); 

裁剪：

Answer 1

我發現toDataURL

我的解決辦法：

$("#clip").click(function() { 
    var width = selectArea.getWidth(); 
    var height = selectArea.getHeight(); 
    var scaleX = selectArea.scaleX; 
    var scaleY = selectArea.scaleY; 
    var left = selectArea.left; 
    var top  = selectArea.top; 

    canvas.remove(selectArea); 

    var cropped = new Image(); 
    cropped.src = canvas.toDataURL({ 
    left: left, 
    top: top, 
    width: width, 
    height: height 
    }); 

    var image = new fabric.Image(cropped); 
    image.left = left; 
    image.top = top; 
    image.width = width; 
    image.height = height; 
    image.scaleX = scaleX; 
    image.scaleY = scaleY; 

    isCropMode = false; 

    canvas.remove(imageObject); 
    canvas.add(image); 

    setTimeout(function(){ 
    canvas.renderAll(); 
    }, 0); 
});