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

Question

用例是在数据库中存储调整大小的 svg。这个问题有 2 个部分。

1. 如何从加载的图像文件中获取数据字符串。

2. 如何通过 Canvas 调整数据字符串图像的大小。

我已经能够将以下代码与 window.URL.createObjectURL() 一起使用以获得一个不错的字符串，但在 Angular 中，我可能将状态(ui-router)混合错误。所以当我点击由 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!


          })();

blob:http%3A//%3A9000/66705b7a-148a-4921-a48b-090fd2ceba52 是它给出的链接。

Answer 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"));