限制在canvas HTML5中绘制图像对象的区域 [英] Restrict area for draw image object in canvas HTML5

问题描述

我要限制在画布中上传图片的区域。我使用fabric js来实现这个解决方案。我看到一个链接，但没有想到。该链接为：

  var canvas = new fabric.Canvas（'canvas'）; $（＃canvascolor> input）。click（function（）{canvas.setBackgroundImage（this.src，canvas.renderAll.bind ，{crossOrigin：'anonymous'}）;}）; //在启动时触发第一个$（＃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 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，角度：0}）。 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（）;};  

  canvas {border：1px solid black;}＃canvascolor input {height：50px; width：50px;}  

 < script src = ：//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 =fileid =file>< canvas id =canvaswidth =520height =520>< / canvas>< section id =canvascolor> < input class =canvasbordertype =imagesrc =https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg> < input class =canvasbordertype =imagesrc =https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg>< / section>< button href = id ='txt'target =_ blank> submit< / button>< br />< img id =preview/>  

div>

解决方案

我扩展了脚本来回答你。
对于你的用例，它看起来像你可以使用一些裁剪函数和统一的中心缩放。

无论如何，限制绘图的区域的主要问题是这样： / p>

  canvas {border：1px solid black;}＃canvascolor input {height：50px; width：50px;}  

 < script src = ：//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 =fileid =file>< canvas id =canvaswidth =520height =520>< / canvas>< section id =canvascolor> < input class =canvasbordertype =imagesrc =https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg> < input class =canvasbordertype =imagesrc =https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg>< / section>< button href = id ='txt'target =_ blank> submit< / button>< br />< img id =preview/>  

div>

I want to restrict area for uploaded image in canvas. I am using fabric js to achieve this solution. I have seen one link, But did not get idea. that link is:Set object drag limit in Fabric.js. I also want to same thing, But i am not able to do this one.

what i want? i will show in screen shot.

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();
};

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

<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" />

解决方案

I extended your script to answer you. For your use case it looks like you could use some clipping function and uniform centered scaling.

Anyway the main question about restricting area for drawing is this:

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();
};

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

<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" />

这篇关于限制在canvas HTML5中绘制图像对象的区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！