使用fabric js和FileReader API在Canvas中的SVG答案

【问题标题】：SVG in Canvas using fabric js and FileReader API使用fabric js和FileReader API在Canvas中的SVG
【发布时间】：2015-07-18 22:23:20
【问题描述】：

我尝试使用 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>

【问题讨论】：

标签： javascript canvas svg fabricjs filereader

【解决方案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);
         }
      }
    }

【讨论】：