javascript - 画布限制fabricjs对象的区域

Question

我想在画布上定义用户可以创建和移动元素的区域。以后用户可以保存图像，并且在画布外溢出的元素不应进入保存的图像。

1. 我想要与以下链接设置 T 恤作为背景相同的功能。
2. 定义用户可以绘制的区域。
3. 将 T 恤与绘制区域一起保存。

我尝试了剪辑，但它也保存了 oveflownig 元素。

您可以查看http://www.riaxe.com/tshirtapphtml5/

Answer 1

用 PHP 保存它 -

function save () {
    canvas.deactivateAll();

    var preview = canvas.toDataURL(
            {
                format: 'jpeg',
                quality: 1
            }
    );

    post (preview);
}

function post () {
      jQuery.ajax({
            url: "",
            data: {"image-extension": "jpeg", "image-data": preview},
            type: "POST",
            beforeSend: function(xhr) {
            }
      }).done(function(data) {

      }).fail(function() {
      });
}

   // PHP
   $imageData = $_POST['image-data'];
   $extension = $_POST['image-extension'];

   $imageData = str_replace("data:image/" . $extension . ";base64,", "", $imageData);

   $filename = uniqid() . "." . $extension;
   $data = base64_encode($imageData);

   ......

   $png = imagecreatefrompng($overlay); // your design from above saved image
   $jpeg = imagecreatefromjpeg($jpeg); // your T-shirt image

   list($width, $height) = getimagesize($overlay);
   list($width2, $height2) = getimagesize($jpeg);

   $x = ; // design position x in T-shirt
   $y = ; // design position y in T-shirt

   $out = imagecreatetruecolor($width2, $height2);
   imagecopyresampled($out, $jpeg, 0, 0, 0, 0, $width2, $height2, $width2, $height2);
   imagecopyresampled($out, $png, x, y, 0, 0, $width, $height, $width, $height);

   imagejpeg($out, $final, 100); // $final = "/..../your final image file name";

如果您只想在客户端执行此操作，我认为有一个技巧-

   var width = ; // your T-shirt image size, not resized one
   var height = ; // your T-shirt image size, not resized one

   var x = ; // the position of your canvas in image
   var y = ; // the position of your canvas in image

   canvas.clone (function (cloned) {

       canvas.clear ();
       canvas.setDimensions ({width:width, height:height});
       canvas.setBackgroundImage(
            url, // your T-shirt image url
            function() {
                canvas.renderAll();
                paste (cloned, x, y);
                preview ();
                restore (cloned);
            }, {'originX': 'left', 'originY': 'top', 'left': 0, 'top': 0}
       )
   });


  function paste (cloned, x, y) {

   var objects = cloned.getObjects();
    for (var i in objects) {
        var left = objects[i].left;
        var top = objects[i].top;

        var tempLeft = left + x;
        var tempTop = top + y;

        objects[i].left = tempLeft;
        objects[i].top = tempTop;

        objects[i].setCoords();
        canvas.add (objects[i]);
    }
 }

 function preview () {

   canvas.deactivateAll();

   var preview = canvas.toDataURL(
            {
                format: 'jpeg',
                quality: 1
            }
   );

   return preview;
 }

 function restore (cloned) {
   canvas = cloned;
   canvas.renderAll();
   cloned = null;
 }

不测试。希望它有效。:>