javascript - 删除控制框和图像之间的填充。 Fabric.js

Question

剪切后我无法删除控制框和图像之间的填充。这就是我所做的:

1. 在 Canvas 上添加图像
2. 规模
3. 双击
4. 添加新矩形
5. 计算参数
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);
});