Question

我有一个html5移动网络应用程序（http://app.winetracker.co），我正在开发功能，可以记住用户在浏览器中返回应用程序时的状态（始终自动刷新） iOS safari）。我通过本地存储存储URL和表单字段数据。表单字段数据项之一是图像的文件输入。我通过画布成功将图像转换为base64并将其存储到localStorage。

function storeTheImage() {
    var imgCanvas = document.getElementById('canvas-element'),
        imgContext = imgCanvas.getContext("2d");

    var img = document.getElementById('image-preview');
    // Make sure canvas is as big as the picture BUT make it half size to the file size is small enough
    imgCanvas.width = (img.width/4);
    imgCanvas.height = (img.height/4);

    // Draw image into canvas element
    imgContext.drawImage(img, 0, 0, (img.width/4), (img.height/4));

    // Get canvas contents as a data URL
    var imgAsDataURL = imgCanvas.toDataURL("image/png");

    // Save image into localStorage
    try {
        window.localStorage.setItem("imageStore", imgAsDataURL);
        $('.localstorage-output').html( window.localStorage.getItem('imageStore') );
    }
    catch (e) {
        console.log("Storage failed: " + e);
    }
}

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#image-preview').attr('src', e.target.result);
            storeTheImage(); 
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$('.file-input').on('change', function() {
    readURL(this);
});

看到这个jsFiddle：https://jsfiddle.net/tonejac/ceLwh9qp/19/

我如何将localStore图像dataURL字符串转换回图像文件，以便将其上传到我的服务器？

Answer 1

如何将localStore图像dataURL字符串转换回图像文件

请参阅fiddle，Javascript窗格第25行。

 // recompose image :
var imgRecomposed = document.createElement('img');
$('.image-recomposed').append(imgRecomposed);
imgRecomposed.src = window.localStorage.getItem('imageStore');

我们创建了一个图片元素，并使用所存储的＆＃39; dataImage＆＃39;填充src属性。

Answer 2

在你的小提琴中：

// Save image into localStorage
    try {
        window.localStorage.setItem("imageStore", imgAsDataURL);
        $('.localstorage-output').html( window.localStorage.getItem('imageStore') );
    }
    catch (e) {
        console.log("Storage failed: " + e);
    }

在try / catch中放置以下任何内容：

$('#canvas-element').context.drawImage(imgAsDataURL);

$('#canvas-element').context.drawImage(imgAsDataURL, 0, 0);

$('#canvas-element').replace(imgAsDataURL);

这会将存储的图像放入您显示的画布中。它已经是一个'图像' - 您可以将它用作元素的src等。将它发送到您的服务器取决于您拥有的环境 - 基本上是Ajax POST或类似的发送base64字符串？。

Answer 3

您首先必须将此dataURL转换为blob，然后使用FormData对象将此blob作为file发送。

要将dataURL转换为blob，我会使用this answer中的函数。

function upload(dataURI, url){
  // convert our dataURI to blob
  var blob = dataURItoBlob(dataURI);
  // create a new FormData
  var form = new FormData();
  // append the blob as a file (accessible through e.g $_FILES['your_file'] in php and named "your_filename.extension")
  form.append('your_file', blob, 'your_filename.'+blob.type.split('image/')[1]);
  // create a new xhr
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url);
  // send our FormData
  xhr.send(form);
  }

// from https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158#5100158
function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);
    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
}

var savedIntoLocalStorage = 'data:image/png;base64,...=';

// execute the request
upload(savedIntoLocalStorage, 'http://yourserver.com/upload.php');

我如何上传以前存储在LocalStorage中的图像？

3 个答案: