Phonegap：如何将 HTML5 画布作为图像保存到设备照片库/库答案

【问题标题】：Phonegap: How to save a HTML5 canvas as image to device photo gallery/libraryPhonegap：如何将 HTML5 画布作为图像保存到设备照片库/库
【发布时间】：2013-08-15 13:41:35
【问题描述】：

嘿，我正在开发一个应用程序，它可以使用 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();

这可以转换为图像对象并保存到手机图库吗？？？

【问题讨论】：

为什么这个标签是“monotouch”？
嘿杰森！当我在 .NET 环境中开发我的应用程序时，我标记了 mono touch。单点触控的解决方案也可能会派上用场。
看这个...stackoverflow.com/questions/13060397/…
感谢@LuanCastro...该插件是否会为 Android、Windows 和 BB 智能手机提供相同的结果？？

标签： javascript html mobile cordova smartphone

【解决方案1】：

https://github.com/devgeeks/Canvas2ImagePlugin 显然可以满足您的需求，尽管我没有尝试过。

【讨论】：

【解决方案2】：

我认为您不能仅使用 JavaScript 将图像保存在图库中，但您可以将用户发送到图像或在用户可以手动保存的位置显示图像。

【讨论】：

【解决方案3】：

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

这里是 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'

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

【讨论】：