使用Fabric JS和FileReader API在Canvas中使用SVG

Question

我嘗試使用Fabric JS和File Reader API在Canvas中讀取SVG

以下用於Image的代碼，它將與SVG一起使用，但不會使用完整的功能，例如更改顏色（ setFill ）和僅適用於SVG的其他功能

 var reader = new FileReader(), input = document.getElementById('imgFile'); reader.onload = function (event) { //loadSVGFromString var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function () { // start fabricJS stuff var coord = getRandomLeftTop(); var image = new fabric.Image(imgObj); if($scope.ImgOption != 'bg'){ image.set({ left: coord.left, top: coord.top }); canvas.add(image); }else{ image.set({ scaleY: canvas.height / imgObj.height, scaleX: canvas.width / imgObj.width }); canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas)); } // end fabricJS stuff } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 

Answer 1

我通過檢查文件類型是否為svg來解決此問題，我使用loadSVGFromString方法將對象呈現為svg路徑並為其着色

function reader(e){
      var FileType='';
      if(!window.FileReader && !window.File && !window.FileList && !window.Blob){
         var IEversion = detectIE();
         if (IEversion !== false) {
            if(IEversion == 9 || IEversion == 8) {
               alertify.alert("You're useing IE v"+IEversion+", /n Pleaase upgrade IE to v10 or higher in order to use the app features!"); // in html5 works and fires alert but not in IE8 
            }
         }
         return;
      }
        var reader = new FileReader(), input = document.getElementById('imgFile');

      reader.onload = function (event) {

       var coord = getRandomLeftTop();
        if(FileType == 'svg'){
            fabric.loadSVGFromString(event.target.result, function(objects, options) {
                 var loadedObject = fabric.util.groupSVGElements(objects, options);
                 loadedObject.set({
                    left: coord.left,
                    top: coord.top
                 }).setCoords();
                 canvas.add(loadedObject);
              });
        }else{
            var imgObj = new Image();
            imgObj.src = event.target.result;
            imgObj.onload = function () {
                // start fabricJS stuff
                var image = new fabric.Image(imgObj);
                   if($scope.ImgOption != 'bg'){
                    image.set({
                        left: coord.left,
                        top: coord.top
                    });
                    canvas.add(image);
                }else{
                    image.set({
                        scaleY: canvas.height / imgObj.height,
                      scaleX: canvas.width / imgObj.width
                    });
                    canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
                }
                // end fabricJS stuff
             }
          }
      }

      if (!input) {
         alertify.alert("Um, couldn't find the fileinput element.");
      } else if (!input.files) {
         alertify.alert("This browser doesn't seem to support the `files` property of file inputs.");
      } else if (!input.files[0]) {
         alertify.alert("Please select a file before clicking 'Load'");
      } else {
         file = input.files[0];
         if (file.type == 'image/svg+xml') {
             FileType = 'svg';
             reader.readAsText(file);//readAsText(file);
         }else{
               FileType = 'image';
               reader.readAsDataURL(file);
         }
      }
    }