基于浏览器的本地文件系统到SVG base64数据字符串

用例在数据库中存储调整大小的svg。这个问题有2个部分。基于浏览器的本地文件系统到SVG base64数据字符串

如何从加载的图像文件中获取数据字符串。
如何通过画布调整数据字符串图像的大小。

我已经能够使用带有window.URL.createObjectURL下面的代码（）得到一个不错的字符串，但在角度，我可能有错误的混合状态（UI路由器）。所以，当我点击创建链接通过CONSOLE.LOG

function createObjectURL() { 
       console.log('file',file); 
       return (window.URL) ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file); 

      }; 

      function revokeObjectURL(url) { 
       console.log('url',url); 
       return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url); 


      }; 

      (function myUploadOnChangeFunction() { 

         console.log('file',file); 
         var src = createObjectURL(file); 
       console.log('src',src); 

       var image = new Image(); 
       console.log('image',image); 

       src = src.toLowerCase().replace(/'+/g, '').replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "-").replace(/^-+|-+$/g, ''); 

         image.src = src; 
         console.log('image.src',image.src); 
       api.testMe = image.src; 
       return api.testMe; 
       // Do whatever you want with your image, it's just like any other image 
         // but it displays directly from the user machine, not the server! 


      })();

斑点：HTTP％3A //％3A9000/66705b7a-148A-4921-a48b-090fd2ceba52是它给人的链接。

来源

2014-10-04 irth

[Inkscape中]（http://inkscape.org/doc/tracing/tutorial- tracing.html）或[Adobe Indesign]（http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html）可以提供帮助。没有看到一个好的基于浏览器的转换器，但我会尝试https://cloudconvert.org/png-to-svg – 2014-10-04 16:03:41

干杯阿尔文，我的主要用例是调整大小和存储在客户端AngularJS CMS应用程序的上传。您的链接显示它是可能的，很明显，我们可以在屏幕上查看的任何图像可以保存在该质量显示的权利？因此，我们可以使用html5画布工具来处理图像，并最终输出要上传到云数据库文档的矢量svg base64字符串。 – irth 2014-10-06 21:21:35

看Emmet如何编码/解码可能会有好处。 http://docs.emmet.io/actions/base64/ – 2014-10-06 21:29:16

-1

首先获取数据的URI：

var reader = new FileReader(); 
     console.log('reader',reader); 
     reader.onload = (function(lefile){ 
       return function(e){ 
        console.log("Filereader done"); 
        console.log('-- RESULT',e.target.result, '-- NAME:', lefile.name);

然后调整大小（从https://github.com/nicam/js-resize/blob/master/resize.js截取）：

var resize = function (image) { 
    mainCanvas = document.createElement("canvas"); 
    mainCanvas.width = 1024; 
    mainCanvas.height = 768; 
    var ctx = mainCanvas.getContext("2d"); 
    ctx.drawImage(image, 0, 0, mainCanvas.width, mainCanvas.height); 
    size = parseInt($('#size').get(0).value, 10); 
    while (mainCanvas.width > size) { 
     mainCanvas = halfSize(mainCanvas); 
    } 
    $('#outputImage').attr('src', mainCanvas.toDataURL("image/jpeg"));

来源

2014-10-11 01:22:25 irth

-1不是“如何将图像通过画布转换为svg”，如您在问题中所述 – 2014-10-13 06:50:16

@ tnt-rox好点，它是我的无知认为画布是转换图像所必需的。当使用画布调整大小时，FileReader将图像转换为base64数据字符串。感谢您的关注。我会解决这个问题。 – irth 2014-10-13 21:37:17

基于浏览器的本地文件系统到SVG base64数据字符串

回答

相关问题