如何使用 html/angularjs 保存图像文件？

Posted 2023-05-07

【中文标题】如何使用 html/angularjs 保存图像文件？

【英文标题】：How do you save an image file with html/angularjs?

【发布时间】：2015-03-12 23:57:29

【问题描述】：

我希望允许用户将图像保存在我的应用的一个页面/状态上，然后以编程方式在我的应用的不同页面/状态上调用该图像。到目前为止，我考虑了三种保存图像的方法，但它们似乎都不适合我：

首先，我尝试使用我选择的数据库 Parse 创建一个“Parse.File”。 Parse.File 是您保存图像的方式。无论出于何种原因，我都无法让它工作 (Creating a Parse.File with javascript SDK)。 Parse 的文档看似具有挑战性，因为他们假定的知识比我拥有的更多。

接下来我想将图像保存在云中，然后在 html 中指向它们。我尝试了 Cloudinary，但花了很长时间才弄清楚如何组装他们的 Angularjs 插件，然后它缺少任何关于如何实际执行任何有意义的文档的文档。后来我考虑了 Flickr，它更容易上手，但他们又缺少一个我可以轻松应用于我的基本案例的示例。

最后，我想到也许我可以将图像保存在本地目录中，并在数据库中使用匹配的引用，就像我可能为我的应用程序调用的任何其他资产一样。到目前为止，我还无法弄清楚如何做到这一点。我开始尝试使用 $http 上传图片。它没有用，所以我查看了 ng-file-upload 和 ngStorage。两者都没有好的应用示例或优秀的文档。最后，我尝试了本教程，但得到了可怕的访问控制允许来源错误。此外，我不清楚哪一个是解决这个问题的正确方法。

我不确定这些方法是否正确。请与我分享哪种方法可以让用户保存以后可以调用的图像文件。如果上述任何一种方法有效，请添加一些可能让我进步的细节。

【问题讨论】：

PFFile 应该可以工作。也许发布该尝试的相关代码。文件的来源是什么？

问题不在于 Parse.File，而在于 Angular 无法通过辅助指令识别来自 html 的“文件”标签。可以在这里找到：uncorkedstudios.com/blog/… 以及对我的发现的更多解释：***.com/questions/28986701/…

【参考方案1】：

这是一个应用程序还是一个网站？ 我同意你的观点，文档非常具有欺骗性。

您可以查看以下链接：

https://www.parse.com/questions/uploading-files-to-parse-using-javascript-and-the-rest-api http://www.antvox.com/index.php/articles/programming/10-uploading-files-to-parse-com-with-angularjs

---

我与 cordova 共享我的应用程序代码：

var photo;

var cameraOptions = 
    quality: 50,
    destinationType: 0,
    encodingType: 0,
    targetWidth: 800,
    targetHeight: 800,
    mediaType: 0,
    correctOrientation: true,
    saveToPhotoAlbum: true
;

$scope.takePicture = function() 
    cameraOptions.sourceType = 1;
    navigator.camera.getPicture(onSuccess, onFail, cameraOptions);


$scope.selectPicture = function() 
    cameraOptions.sourceType = 0;
    navigator.camera.getPicture(onSuccess, onFail, cameraOptions);


function onSuccess(picture) 
    File.upload(picture)
        .success(function(data) 
            // What you want
        );


function onFail(resp) 
    alert('Error: ' + resp);