如何从 json 数据传输中读取图像答案

【问题标题】：How to read image from json data transfer如何从 json 数据传输中读取图像
【发布时间】：2016-10-28 10:38:01
【问题描述】：

今天我正在使用 HTML5 中的拖放。我想做类似的事情：

从您的计算机中获取图像文件，
将它放到网络浏览器的 input="file" 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 格式的文件，接下来呢？如何在浏览器中显示？我怎样才能将它发送到服务器？如何存储在本地存储中？

也许一种可能的方法是将其发送到服务器（本地存储？）然后放入浏览器？但这不是实时预览？

任何想法如何解决这个问题？

【问题讨论】：

标签： javascript html image web drag-and-drop

【解决方案1】：

好的，我解决了这个问题：

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

【讨论】：