如何從json數據傳輸中讀取圖像

今天我正在使用HTML5進行拖放操作。我想要做的事，如：從您的計算機如何從json數據傳輸中讀取圖像

抓取的圖像文件，
砸在輸入=「文件」 DIV在網頁瀏覽器
然後，我需要借這個畫面和＃顯示出來livePreview div

我知道我無法從用戶位置獲得此文件的絕對路徑 - 安全性的東西。

我做這樣的事情：

HTML

var livePreview = document.getElementById('livePreviewId'); 
 
    var imageInput = document.getElementById("inputFileId"); 
 
    
 
    imageInput.addEventListener("dragover", function(e){ 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
    }); 
 
    imageInput.addEventListener("dragenter", function(e){ 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
    }); 
 
    
 
    imageInput.addEventListener("drop", function(e){ 
 
     if(e.dataTransfer){ 
 
      console.log(e.dataTransfer); 
 
      if(e.dataTransfer.files.length) { 
 
       console.log("e files length ", e.dataTransfer.files.length); 
 
       e.preventDefault(); 
 
       e.stopPropagation(); 
 
       /*UPLOAD FILES HERE*/ 
 
       console.log("e files ", e.dataTransfer.getData("image/gif")); 
 
       upload(e.dataTransfer.files); 
 
      } 
 
     } 
 
    }); 
 
    
 
    function upload(files){ 
 
     console.log(files[0]); 
 
    }

<div id="livePreviewId" style="border:1px solid #d3d3d3;width:150px;height:300px;"></div> 
 
      
 
      <div class="pull-right"> 
 
       <p>Drop it here:</p> 
 
       <input id="inputFileId" type="file" class="column" style="border:1px solid #d3d3d3;width:350px;height:50px;"/> 
 
      </div>

好，我知道在JSON文件，何去何從？我如何在瀏覽器中顯示它？我怎樣才能把它發送到服務器？如何存儲在本地存儲？

也許一種可能的方法是將它發送到服務器（本地存儲？），然後放入瀏覽器？但這不是實時預覽？

任何想法如何解決這個問題？

來源

2016-10-28 Przemysław Sienkiewicz

好吧，我解決此問題：

HTML

<img id="livePreviewId" src="" /> 

<div class="pull-right"> 
    <p>Or drop it here:</p> 
    <input id="fileDropFieldId" type="file" class="column" style="border:1px solid #d3d3d3;width:350px;height:50px;"/> 
</div>

JavaScript代碼

var dndOutput = document.getElementById('livePreviewId'); 
var imageInput = document.getElementById("fileDropFieldId"); 

imageInput.addEventListener('change', function(){ 
    var file = this.files[0]; 
    if(file.type.indexOf('image') < 0){ 
     console.error('invalid type'); 
     return; 
    } 
    var fReader = new FileReader(); 
    fReader.onload = function(){ 
     dndOutput.src = fReader.result; 
     localStorage.setItem('imgData', getBase64Image(dndOutput)); 
    }; 
    fReader.readAsDataURL(file); 
}); 

function getBase64Image(img){ 
    var canvas = document.createElement('canvas'); 
    canvas.width = img.width; 
    canvas.height = img.height; 

    var imgCtx = canvas.getContext('2d'); 
    imgCtx.drawImage(img, 0,0); 
    var dataUrl = canvas.toDataURL('image/png'); 

    return dataUrl.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

function fetchimage(){ 
    var dataImage = localStorage.getItem('imgData'); 
    dndOutput.src = "data:image/png;base64," + dataImage; 
} 
fetchimage();

來源

2016-10-28 11:09:46

如何從json數據傳輸中讀取圖像

回答

相關問題