javascript - 如何将 JPEG 从 URL 保存到 angularjs(ionic) 中的文件？

Question

我从 ng-src 获得了 base64data，但是我无法用这个 base64data 制作 jpeg 文件。我一直在尝试如下:首先，我从 data:image/jpeg:base64,/9/DEefesdfae453/sdDFEYEUdfdief8fe ... 中删除了 data:image/jpeg:base64, block 并写入此数据使用 $cordovaFile 与 test.jpg 文件。这是我的代码:

        var base64Image = angular.element(document.querySelectorAll('#my-photo')).attr('src');

        var writeData = base64Image.replace(/data:image\/jpeg;base64,/g, '');

        alert(writeData);
        // Writing filtered image -----------------------------------------------------------------

        $cordovaFile.writeFile(ROOT_DIR + PM_DATA_DIR_NAME + '/', $scope.photo.name, writeData, true)
            .then(function (success) {
                // success
                $ionicLoading.hide();
                $ionicPopup.alert({
                    template : "Updated Photo!!"
                });
            }, function (error) {
                // error
                $ionicLoading.hide();
                $ionicPopup.alert({
                    template : "Failed to update Photo!!"
                });
            });

但我无法将文件显示为图像文件。它仅显示黑屏。 (原始文件大小:19K ---> 结果文件大小:66K)

怎么了？请帮我。谢谢大家帮忙。

Answer 1

FileWriter 的 write 方法不接受 base64 字符串。根据文档( http://docs.phonegap.com/en/edge/cordova_file_file.md.html#FileWriter )，文本在写入之前将被编码为 UTF-8。因此，您的 Base64 字符串在写入文件之前已被编码，因此它不是有效的图像数据。您必须将图像数据作为 Blob 或 ArrayBuffer 传递。请注意，这仅适用于 iOS 和 Android。看看 Jeremy Banks 的 b64toBlob 函数:https://stackoverflow.com/a/16245768

function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);
    var byteNumbers = new Array(slice.length);

    for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
}

var blob = new Blob(byteArrays, {type: contentType});
return blob;
}

您可以将生成的 blob 传递到 write 方法中。