限制画布HTML5中绘制图像对象的区域

Question

我想在画布中限制上传图片的区域。我正在使用fabric js来实现这个解决方案。我看过一个链接，但是没有想到。该链接是：Set object drag limit in Fabric.js。 我也想要同样的事情，但我无法做到这一点。

我想要什么？我将在屏幕截图中显示。

＆＃13;

＆＃13;

var canvas = new fabric.Canvas('canvas');
$("#canvascolor > input").click(function() {
  canvas.setBackgroundImage(this.src, canvas.renderAll.bind(canvas), {
    crossOrigin: 'anonymous'
  });
});
// trigger the first one at startup
$("#canvascolor > input:first-of-type()")[0].click();

document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 140,
        top: 100,
        width: 250,
        height: 200,
        angle: 0
      }).scale(0.9);
       oImg.lockMovementX = true;
     
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 0.8
      });
    });
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

＆＃13;

  canvas {
  border: 1px solid black;
}
#canvascolor input {
  height: 50px;
  width: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
   <input type="file" id="file">
<canvas id="canvas" width="520" height="520"></canvas>
<section id="canvascolor">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg">
</section>
<button href='' id='txt' target="_blank">submit</button><br/>
<img id="preview" />

＆＃13;

＆＃13;

＆＃13;

Answer 1

我扩展了你的脚本来回答你。 对于您的用例，看起来您可以使用一些裁剪功能和统一的居中缩放。

无论如何，限制绘图区域的主要问题是：

＆＃13;

＆＃13;

var canvas = new fabric.Canvas('canvas');
$("#canvascolor > input").click(function() {
  canvas.setBackgroundImage(this.src, canvas.renderAll.bind(canvas), {
    crossOrigin: 'anonymous'
  });
});
// trigger the first one at startup
$("#canvascolor > input:first-of-type()")[0].click();
function clipTShirt(ctx) {
   ctx.save();
   ctx.setTransform(1, 0, 0, 1, 0, 0);
   var x = 140, y = 100 ,w = 225, h = 300;
   ctx.moveTo(x, y);
   ctx.lineTo(x + w, y);
   ctx.lineTo(x + w, y + h);
   ctx.lineTo(x, y + h);
   ctx.lineTo(x, y);
   ctx.restore();
}
document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 140,
        top: 100,
        width: 250,
        height: 200,
        angle: 0,
        lockUniScaling: true,
        centeredScaling: true,
        clipTo: clipTShirt
      }).scale(0.9);
       oImg.lockMovementX = true;
     
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 0.8
      });
    });
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

＆＃13;

  canvas {
  border: 1px solid black;
}
#canvascolor input {
  height: 50px;
  width: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
   <input type="file" id="file">
<canvas id="canvas" width="520" height="520"></canvas>
<section id="canvascolor">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg">
</section>
<button href='' id='txt' target="_blank">submit</button><br/>
<img id="preview" />

＆＃13;

＆＃13;

＆＃13;