如何从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数据传输中读取图像

回答

相关问题