Инструмент Лассо в холсте html5

Question

Я пытаюсь создать произвольный инструмент лассо, чтобы обрезать изображение внутри холста. Я использую fabric.js, чтобы нарисовать форму.

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function() {
  var OwnCanv = new fabric.Canvas('c', {
    isDrawingMode: true
  });

  OwnCanv.freeDrawingBrush.color = "purple"
  OwnCanv.freeDrawingBrush.width = 4

  ctx.clip();

  ctx.drawImage(img, 0, 0);
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>

<canvas id="c" width="500" height="500"></canvas>

Это моя попытка, которая, похоже, не работает, что я здесь делаю не так?

Кто-нибудь может мне помочь? Это действительно будет оценено.

Answer 1

Изображение должно быть fabric.Image,

Вы можете попробовать что-то вроде этого:

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function() {
    var OwnCanv = new fabric.Canvas('c', {
        isDrawingMode: true
    });

    var imgInstance = new fabric.Image(img, {
        left: 0,
        top: 0,
    });
    OwnCanv.add(imgInstance);

    OwnCanv.freeDrawingBrush.color = "purple"
    OwnCanv.freeDrawingBrush.width = 4

    OwnCanv.on('path:created', function(options) {
        var path = options.path;
        OwnCanv.isDrawingMode = false;
        OwnCanv.remove(imgInstance);
        OwnCanv.remove(path);
        OwnCanv.clipTo = function(ctx) {
            path.render(ctx);
        };
        OwnCanv.add(imgInstance);
    });
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>

<canvas id="c" width="500" height="500"></canvas>

Смотрите эти ресурсы для получения дополнительной информации:

http://fabricjs.com/fabric-intro-part-1/

Несколько областей отсечения на холсте Fabric.js

Fabric.js Clip Canvas (или группа объектов) К полигону