我會如何上傳在localStorage的預先存儲的影像？

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

我們創建一個圖像元素，並填補了src attibute與所存儲的「數據 - 圖象」的數據。

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

這將放置在S將圖像轉換爲您已顯示的畫布。 它已經是一個'圖像' - 你可以用它作爲一個元素的src等。發送到你的服務器取決於你有的環境 - 基本上是一個Ajax POST或類似的發送base64字符串？

Answer 3

您必須首先這個dataURL轉換爲blob，然後用FormData對象本blob發送的file。

要將dataURL轉換成團塊，我使用的功能從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');