Question

用例是将resized svg存储在数据库中。这个问题有两个部分。

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

我已经能够使用以下代码与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"));

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

1 个答案: