Функциональность урожая с использованием FabricJs

Как реализовать инструмент обрезки изображения, загружаемого на холст с помощью fabric.js? У меня есть изображение, загруженное на холст. Теперь я хочу реализовать инструмент обрезки, когда пользователю разрешено обрезать изображение и перезагружать его на холст, когда он будет сделан.

Ответы

Ответ 1

Вкратце

  1. установить el.selectable = false
  2. нарисовать прямоangularьник с помощью события мыши
  3. получить прямоangularьник слева/сверху и ширину/высоту
  4. затем используйте следующую функцию

Извините, позвольте мне объяснить. ctx.rect обрезает изображение от центральной точки объекта. Также следует учитывать фактор scaleX.

x = select_el.left - object.left;
y = select_el.top - object.top;

x *= 1 / scale;
y *= 1 / scale;

width = select_el.width * 1 / scale;
heigh = select_el.height * 1 / scale;

object.clipTo = function (ctx) {
    ctx.rect (x, y, width, height);
}

Полный пример: http://jsfiddle.net/hellomaya/kNEaX/1/

И проверьте это http://jsfiddle.net/hellomaya/hzqrM/ для создания окна выбора. И ссылка на события Fabric: https://github.com/kangax/fabric.js/wiki/Working-with-events

Ответ 2

(Этот ответ представляет собой итерацию на скрипке в ответе Тома. Спасибо, Том, за то, что вывели меня в путь.)

Вы можете обрезать в Fabric.js, используя fabric.Object.clipTo() или fabric.Object.toDataURL(). Метод clipTo() сохраняет исходное изображение и отображает кадрирование через маску. Метод toDataURL() создает новое изображение.

В моем полном примере используется метод clipTo(). В конце я включил небольшой фрагмент кода, показывающий метод toDataURL().

Решение 1

Резюме

  1. Подготовьте невидимый прямоangularьник. Сделайте так, чтобы пользователь рисовал, когда пользователь щелкает мышью по холсту.
  2. Когда пользователь отпустит щелчок мышью, обрежьте основное изображение

Отличие от ответа Тома

В ответе на скрипке от Тома есть пара незначительных вещей, которые я хотел бы изменить. Итак, в моем примере различия

  1. Рамка обрезки работает слева направо и справа налево (Том работает только справа налево)

  2. У вас есть более одного шанса нарисовать рамку обрезки (попытка перерисовать рамку обрезки в Томе заставляет коробку прыгать)

  3. Работает с Fabric.js v1.5.0

  4. Меньше кода.

Кодекс

 // set to the event when the user pressed the mouse button down
var mouseDown;
// only allow one crop. turn it off after that
var disabled = false;
var rectangle = new fabric.Rect({
    fill: 'transparent',
    stroke: '#ccc',
    strokeDashArray: [2, 2],
    visible: false
});
var container = document.getElementById('canvas').getBoundingClientRect();
var canvas = new fabric.Canvas('canvas');
canvas.add(rectangle);
var image;
fabric.util.loadImage("http://fabricjs.com/lib/pug.jpg", function(img) {
    image = new fabric.Image(img);
    image.selectable = false;
    canvas.setWidth(image.getWidth());
    canvas.setHeight(image.getHeight());
    canvas.add(image);
    canvas.centerObject(image);
    canvas.renderAll();
});
// capture the event when the user clicks the mouse button down
canvas.on("mouse:down", function(event) {
    if(!disabled) {
        rectangle.width = 2;
        rectangle.height = 2;
        rectangle.left = event.e.pageX - container.left;
        rectangle.top = event.e.pageY - container.top;
        rectangle.visible = true;
        mouseDown = event.e;
        canvas.bringToFront(rectangle);
    }
});
// draw the rectangle as the mouse is moved after a down click
canvas.on("mouse:move", function(event) {
    if(mouseDown && !disabled) {
        rectangle.width = event.e.pageX - mouseDown.pageX;
        rectangle.height = event.e.pageY - mouseDown.pageY;
        canvas.renderAll();
    }
});
// when mouse click is released, end cropping mode
canvas.on("mouse:up", function() {
    mouseDown = null;
});
$('#cropB').on('click', function() {
    image.clipTo = function(ctx) {
        // origin is the center of the image
        var x = rectangle.left - image.getWidth() / 2;
        var y = rectangle.top - image.getHeight() / 2;
        ctx.rect(x, y, rectangle.width, rectangle.height);
    };
    image.selectable = true;
    disabled = true;
    rectangle.visible = false;
    canvas.renderAll();
});
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" type="text/javascript"></script>
</head>
<body>
<canvas style="border: 1px solid black" id="canvas"></canvas>
<button id=cropB>crop</button>
</body>