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

Phonegap: How to save a HTML5 canvas as image to device photo gallery/library

本文关键字：保存 照片库 图像 HTML5 布作 Phonegap      更新时间：2023-09-26

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

可以将其转换为图像对象并保存到手机多媒体资料中吗？？？

https://github.com/devgeeks/Canvas2ImagePlugin显然可以做你想做的事，尽管我还没有尝试过。

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

也许你可以试试我为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'

您还可以使用下载方法

将本地文件保存到图像库
相关文章：