[英]Remove drag property from uploaded image in canvas html5 (set area to uploaded image)
我正在使用Fabric js在画布中上传图像。 现在它是可拖动的,但是我想删除拖动属性并设置区域以在画布上上传图像。
HTML:
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="canvas" width="750" height="550"></canvas>
<input type="file" id="file">
CSS:
canvas{
border: 1px solid black;
}
JAVA脚本:
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 50, top: 100,width: 250, height: 200, angle: 00}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
});
};
reader.readAsDataURL(file);
var dataURL = canvas.toDataURL({
format: 'png',
opacity: 0.9
});
});
var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 50, top: 100,width:200,height:200, angle: 00}).scale(0.9); canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); }); }; reader.readAsDataURL(file); var dataURL = canvas.toDataURL({ format: 'png', opacity: 0.9 }); console.log("Canvas Image " + dataURL); });
canvas{ border: 1px solid black; }
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <canvas id="canvas" width="750" height="550"></canvas> <input type="file" id="file">
我只想删除上传图片的拖动属性。
只需锁定
.lockMovementX = true;
.lockMovementY = true;
var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 50, top: 100,width:200,height:200, angle: 00}).scale(0.9); oImg.lockMovementX = true; oImg.lockMovementY = true; canvas.add(oImg); var a = canvas.setActiveObject(oImg); }); }; reader.readAsDataURL(file); var dataURL = canvas.toDataURL({ format: 'png', opacity: 0.9 }); console.log("Canvas Image " + dataURL); });
canvas{ border: 1px solid black; }
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <canvas id="canvas" width="750" height="550"></canvas> <input type="file" id="file">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.