从 canvas html5 中上传的图片中删除拖拽属性（将区域设置为上传的图片）

Question

我正在使用 fabric js 在 canvas 中上传图片。现在它是可拖动的，但我想删除拖动属性并将区域设置为在 canvas 上上传的图像。

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

我只想删除已上传图片的拖动属性。

Answer 1

只需用

锁定

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

从 canvas html5 中上传的图片中删除拖拽属性（将区域设置为上传的图片）

Remove drag property from uploaded image in canvas html5 (set area to uploaded image)

html

javascript

jquery

canvas

fabricjs

从 canvas html5 中上传的图片中删除拖拽 属性（将区域设置为上传的图片）

Remove drag property from uploaded image in canvas html5 (set area to uploaded image)

html

javascript

jquery

canvas

fabricjs

从 canvas html5 中上传的图片中删除拖拽属性（将区域设置为上传的图片）