브라우저 기반 로컬 파일 시스템 대 SVG base64 데이터 문자열

Question

유스 케이스는 데이터베이스에 크기가 조정 된 svg를 저장합니다. 이 질문에는 2 부분이 있습니다.

1. 로드 된 이미지 파일에서 데이터 문자열을 가져 오는 방법.

2. 캔버스를 통해 데이터 문자열 이미지의 크기를 조정하는 방법.

내가 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 그것이 제공하는 링크입니다.

Answer 1

먼저 얻는 데이터 URI : 다음 (https://github.com/nicam/js-resize/blob/master/resize.js 찍은)의 크기를 조정

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

:

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