Question

我正在尝试使用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);
            }
        });

Answer 1

问题是浏览器会将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)
})

Answer 2

这是我使用的功能。它使用Blob构造函数，因此它适用于最新的Chrome（那些没有弃用的BlobBuilder），也适用于缺少“blob”的旧版iOS 6。对于xhr.responseType。

在评论中，您还可以看到已弃用的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);
}

Answer 3

我找到了一种方法。

使用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

Answer 4

在支持XMLHttpRequest Level 2的现代浏览器上，this answer中记录的方法应该有效。

如何使用图像的URL将图像保存到HTML5文件系统

5 个答案: