4

我正在尝试使用 HTML5 系统来存储我的网站的图像，我发现有很多示例可以展示如何将本地图像存储到您的 chrome 文件系统，但我找不到通过 web 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);
            }
        });
4

5 回答 5

2

这里是我使用的功能。它使用 Blob 构造函数，因此可以在最新的 Chrome 上运行（缺少已弃用的 BlobBuilder），也可以在缺少 xhr.responseType 的“blob”的旧 iOS 6 上运行。

在注释中，您还可以看到已弃用的 BlobBuilder 的代码。

注意：您使用的是 XHR，因此必须启用 CORS！

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);
}
于 2014-05-21T10:59:35.360 回答
2

问题是浏览器会将 xhr 响应数据解析为 UTF-8，所以重点是覆盖 MimeType：

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)
})
于 2012-11-09T01:38:29.653 回答
1

诀窍是使用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;
};

基于cordova-promise-fs（披露：我是作者）

于 2014-11-29T16:55:58.997 回答
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;
}

我从这里 jsfiddle获得帮助

于 2012-08-10T08:48:32.573 回答
1

在支持 XMLHttpRequest Level 2 的现代浏览器上，此答案中记录的方法应该可以工作。

相关标准在这篇博文中进行了解释

于 2013-12-14T16:21:44.007 回答