이미지의 URL을 사용하여 이미지를 HTML5 파일 시스템에 저장하는 방법

Question

HTML5 시스템을 사용하여 내 웹 사이트의 이미지를 저장하려고합니다. 크롬 파일 시스템에 로컬 이미지를 저장하는 방법을 보여주는 예제가 많이 있습니다. 하지만 웹 URL로 이미지를 가져 와서 HTML5 파일 시스템에 저장하는 방법을 찾을 수 없습니다.

이것은 내 코드이지만 잘못되었습니다.

 lib.ajax.get(file , function(xhr, data){ 
      if(xhr.status == 200){ 
       fs.root.getFile("test.jpg", {create: true}, function(fileEntry) { 
        // Create a FileWriter object for our FileEntry (log.txt). 
        fileEntry.createWriter(function(fileWriter) { 
         fileWriter.onwriteend = function(e) { 
          console.log('Write completed.'); 
         }; 

         fileWriter.onerror = function(e) { 
          console.log('Write failed: ' + e.toString()); 
         }; 
         // Create a new Blob and write it to log.txt. 
         var bb = new BlobBuilder(); // Note: window.WebKitBlobBuilder in Chrome 12. 
         bb.append(data); 
         fileWriter.write(bb.getBlob('image/jpeg')); 
         callback && callback("test.jpg"); 
        }, errorHandler); 

       }, errorHandler); 
      } 
     }); 

Answer 1

이 방법이 있습니다.

데이터 형식을 전송하기 위해 canvans.toDataURL을 사용하십시오.

var img = new Image(); 
       var cvs = document.createElement('canvas'); 
       var ctx = cvs.getContext("2d"); 
       img.src = file; 
       img.onload = function(){ 
        cvs.width = img.width; 
        cvs.height = img.height; 
        ctx.drawImage(img, 0, 0); 
        var imd = cvs.toDataURL(contentType[extname]); 
        var ui8a = convertDataURIToBinary(imd); 
        var bb = new BlobBuilder(); 
        bb.append(ui8a.buffer); 
        fs.root.getFile(path, {create: true}, function(fileEntry) { 
         // Create a FileWriter object for our FileEntry (log.txt). 
         fileEntry.createWriter(function(fileWriter) { 
          fileWriter.onwriteend = function(e) { 
           console.log('Write completed.'); 
           callback && callback("test.jpg"); 
          }; 

          fileWriter.onerror = function(e) { 
           console.log('Write failed: ' + e.toString()); 
          }; 

          fileWriter.write(bb.getBlob(contentType[extname])); 
         }); 
        }); 
       }; 



    function convertDataURIToBinary(dataURI) { 
    var BASE64_MARKER = ';base64,'; 
    var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length; 
    var base64 = dataURI.substring(base64Index); 
    var raw = window.atob(base64); 
    var rawLength = raw.length; 
    var array = new Uint8Array(new ArrayBuffer(rawLength)); 

    for (i = 0; i < rawLength; i++) { 
     array[i] = raw.charCodeAt(i); 
    } 
    return array; 
} 

내가 여기에서 도움을받을 enter link description here

인용문

Answer 2

문제는 해당 브라우저가 UTF-8, 그래서 요점은 무시할 MIME 타입이기 때문에 XHR 응답 데이터를 분석 할 것이다 : 현대적인 브라우저에

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; 

var xhr = new XMLHttpRequest(); 
var photoUrl = 'http://localhost:3000/image.jpg'; 
xhr.open('GET', photoUrl, true); 

// This stops the browser from parsing the data as UTF-8: 
xhr.overrideMimeType('text/plain; charset=x-user-defined'); 

function stringToBinary(response) { 
    var byteArray = new Uint8Array(response.length); 
    for (var i = 0; i < response.length; i++) { 
    byteArray[i] = response.charCodeAt(i) & 0xff; 
    } 
    return byteArray 
} 

function onInitFs(fs) { 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4 && xhr.status == 200) { 
     fs.root.getFile('image.jpg', {'create': true}, function(fileEntry) { 
     fileEntry.createWriter(function(fileWriter) { 
      fileWriter.onwriteend = function(event) { 
      $('body').append('<img src="' + fileEntry.toURL() + '"/>'); 
      } 

      buffer = stringToBinary(xhr.response); 
      var blob = new Blob([ buffer ], { type: 'image/jpeg' }) 

      fileWriter.write(blob); 
     }, errorHandler); 
     }); 
    } 
    } 
    xhr.send(); 
} 

var errorHandler = function(err) { 
    console.log(err); 
} 

$(function() { 
    webkitStorageInfo.requestQuota(PERSISTENT, 5*1024*1024, function(grantedBytes) { 
    requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler) 
    }, errorHandler) 
}) 

Answer 3

XMLHttpRequest Level 2를 지원하면 this answer에 문서화 된 메소드가 작동합니다.

관련 표준은 다음 this blog post

Answer 4

에서 내가 사용하는 기능을 설명합니다. Blob 생성자를 사용하므로 최신 Chrome (deprecated BlobBuilder가 없음)에서 작동하며 xhr.responseType에 'blob'이없는 이전 iOS 6에서도 작동합니다.

의견에서 비추천 BlobBuilder에 대한 코드도 있습니다.

알림 : CORS를 사용하도록 XHR을 사용 중입니다!

는

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; 
window.requestFileSystem(window.PERSISTENT, 2*1024*1024, onFileSystemSuccess, fail); 


function onFileSystemSuccess(fileSystem) { 
    fs = fileSystem; 
    console.log('File system initialized'); 

    saveAsset('http://www.example-site-with-cors.com/test.png'); 
} 


function saveAsset(url, callback, failCallback) { 
    var filename = url.substring(url.lastIndexOf('/')+1); 

    // Set callback when not defined 
    if (!callback) { 
     callback = function(cached_url) { 
      console.log('download ok: ' + cached_url); 
     }; 
    } 
    if (!failCallback) { 
     failCallback = function() { 
      console.log('download failed'); 
     }; 
    } 

    // Set lookupTable if not defined 
    if (!window.lookupTable) 
     window.lookupTable = {}; 

    // BlobBuilder shim 
    // var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder; 

    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', url, true); 
    // xhr.responseType = 'blob'; 
    xhr.responseType = 'arraybuffer'; 

    xhr.addEventListener('load', function() { 

     fs.root.getFile(filename, {create: true, exclusive: false}, function(fileEntry) { 
      fileEntry.createWriter(function(writer) { 

       writer.onwrite = function(e) { 
        // Save this file in the path to URL lookup table. 
        lookupTable[filename] = fileEntry.toURL(); 
        callback(fileEntry.toURL()); 
       }; 

       writer.onerror = failCallback; 

       // var bb = new BlobBuilder(); 
       var blob = new Blob([xhr.response], {type: ''}); 
       // bb.append(xhr.response); 
       writer.write(blob); 
       // writer.write(bb.getBlob()); 

      }, failCallback); 
     }, failCallback); 
    }); 

    xhr.addEventListener('error', failCallback); 
    xhr.send(); 

    return filename; 
} 



function fail(evt) { 
    console.log(evt.target.error.code); 
} 

Answer 5

비결은 cordova-promise-fs을 바탕으로 xhr.responseType = 'blob'

var fs = .... // your fileSystem 
function download(fs,url,file,win,fail) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', url); 
    xhr.responseType = "blob"; 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     if(xhr.status === 200){ 
     fs.root.getFile(file,{create:true},function(fileEntry){ 
      fileEntry.createWriter(function(writer){ 
      writer.onwriteend = win; 
      writer.onerror = fail; 
      writer.write(xhr.response); 
      }) 
     },fail) 
     } else { 
     fail(xhr.status); 
     } 
    } 
    }; 
    xhr.send(); 
    return xhr; 
}; 

을 사용하는 것입니다 (공개 : 나는 저자 해요)