Phonegap：如何将HTML5画布保存为设备照片库中的图像

Question

你好，我正在开发一款应用程序，可以使用 Phonegap 为图片添加地理位置和时间戳标签。我已经能够通过将图像编辑为画布来为其添加标签。现在我需要将编辑后的图像作为新图像保存到设备照片库或替换选定的图像以进行标记。使用 Phonegap 的目的是该应用程序必须跨平台运行。是否有办法实现这一点？

以下代码将编辑图像为画布并将图像转换回数据 URI。

var canvas = document.getElementById("canvasPnl");
        var context = canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.onload = function(){

        context.drawImage(imageObj,0,0,300,300 );
        context.fillStyle="#FFFFFF";
        context.fillText('Latitude: '+ lat.toString()+' Longitude: '+ lon.toString(), 0, 10);
        context.fillText(new Date(), 0, 20);
        };
        imageObj.src=imageURI;
        dataURI= canvas.toDataURL();

这能转换为图像对象并保存到手机相册吗？

- Hemantsom

---

为什么这个被标记为“monotouch”？ - Jason

嘿，Jason！我标记了Mono Touch，因为我正在.NET环境中开发我的应用程序。在Mono Touch中找到的解决方案也可能很有用，可以进行比较。 - Hemantsom

请查看以下链接： http://stackoverflow.com/questions/13060397/saving-a-png-or-jpg-image-to-photos-in-ios-via-phonegap - Luan Castro

谢谢@LuanCastro... 这个插件对Android、Windows和BB智能手机会产生相同的结果吗？ - Hemantsom

Answer 1

Canvas2ImagePlugin 看起来可以满足您的需求，尽管我没有试过。

- Ade

Answer 2

我认为仅使用JavaScript无法使图像保存在图库中，但您可以将用户发送到图像或显示图像，以便用户可以手动保存。

- 0e4ef622

Answer 3

也许你可以尝试我为IOS编写的插件（如果你想将画布元素保存到照片库中，你可以获取画布的dataURI，然后使用下面的downloadWithUrl方法）。希望它对你有用。

这是git链接：https://github.com/Nomia/ImgDownloader 简单示例：

document.addEventListener("deviceready",onDeviceReady);

//google logo url
url = 'https://www.google.com/images/srpr/logo11w.png';

onDeviceReady = function(){
    cordova.plugins.imgDownloader.downloadWithUrl(url,function(){
        alert("success");
    },function(){
        alert("error");
    });        
}

//also you can try dataUri like: 1px gif
//url = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

你也可以使用下载方法将本地文件保存到图库中。

- Nimbosa