Question

我目前正在使用fabric.js库和输入文件按钮将png或svg文件导入画布。以下代码仅在图像位于根文件夹中时才有效。我知道我无法访问文件路径，因此我尝试从文件中创建一个元素。控制台中没有错误，但画布中没有显示任何内容。有没有办法让输入工作或是否有一个不同的库可以帮助我这样做？我正在使用fabric.js，以便能够在画布中缩放和移动图像。

function upload(){
    var canvas = new fabric.Canvas('canvas');
    var file = document.getElementById('file').files[0].name;
    fabric.Image.fromURL(file, function(img) {
        canvas.add(img);
    })
}

Answer 1

是！

有一种方法可以使用FabricJS导入image / svg文件，如下所示......

＆＃13;

var canvas = new fabric.Canvas('c');

function upload(e) {
   var fileType = e.target.files[0].type;
   var url = URL.createObjectURL(e.target.files[0]);

   if (fileType === 'image/png') { //check if png
      fabric.Image.fromURL(url, function(img) {
         img.set({
            width: 180,
            height: 180
         });
         canvas.add(img);
      });
   } else if (fileType === 'image/svg+xml') { //check if svg
      fabric.loadSVGFromURL(url, function(objects, options) {
         var svg = fabric.util.groupSVGElements(objects, options);
         svg.scaleToWidth(180);
         svg.scaleToHeight(180);
         canvas.add(svg);
      });
   }
}

＆＃13;

canvas {
   margin-top: 5px;
   border: 1px solid #ccc
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js"></script>
<input type="file" onchange="upload(event)">
<canvas id="c" width="180" height="180"></canvas>

＆＃13;

有没有办法使用fabric.js导入图像文件？

1 个答案: