限制畫布中繪製圖像對象的區域HTML5

Question

我想限制在畫布中上傳圖像的區域。我正在使用fabric js來實現此解決方案。我看到了一個鏈接，但沒有明白。該鏈接是：Set object drag limit in Fabric.js。 我也想同樣的事情，但我不能做到這一點。

我想要什麼？我會在屏幕截圖中顯示。

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

Answer 1

我伸出你的腳本來回答你。 對於你的用例，它看起來像你可以使用一些裁剪功能和統一中心縮放。

反正有關限制區域用於繪圖的主要問題是：

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