SVG在画布中使用衣物JS和的FileReader API

Question

我尝试阅读器SVG在画布中使用面料JS和文件阅读器API

的图像下面的代码，它会与SVG工作，但它会不使用全功能，例如改变颜色（setFill）等，其工作只为SVGs

var reader = new FileReader(), input = document.getElementById('imgFile'); 
 
     
 
     reader.onload = function (event) { 
 
    \t //loadSVGFromString 
 
     var imgObj = new Image(); 
 
     imgObj.src = event.target.result; 
 
     imgObj.onload = function() { 
 
      // start fabricJS stuff 
 
     \t var coord = getRandomLeftTop(); 
 
      var image = new fabric.Image(imgObj); 
 
     \t if($scope.ImgOption != 'bg'){ 
 
\t    image.set({ 
 
\t     left: coord.left, 
 
\t     top: coord.top 
 
\t    }); 
 
      \t canvas.add(image); 
 
      }else{ 
 
      \t image.set({ 
 
\t    \t scaleY: canvas.height/imgObj.height, 
 
        scaleX: canvas.width/imgObj.width 
 
      \t }); 
 
      \t 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); 
     } 
     } 
    }