android保存canvas为图片,关于Canvas保存为图片

var canvas = document.querySelector("#canvas");

var strDataURI = canvas.toDataURL("image/jpeg");

这就是获取数据的方法，网上都很多这样的代码。但是，如何保存呢？

1.保存图片

可以以流的方式保存下来，亲测可行。

var canvas = document.querySelector("#canvas");

var strDataURI = canvas.toDataURL("image/jpeg");

var image=strDataURI.replace("image/jpeg", "image/octet-stream");

window.location.href=image;

但是在webapp该方法是不行的，默认是不支持的。一种方法是在android的java代码写js接口，而一个纯webapp，确是很难做到(其实也不是)，只不过找了大半天，都没找到。

2.webapp支持保存图片

相关依赖：

angularjs

cordova

cordova-plugin-file(插件)

cordova plugin add cordova-plugin-file

当然这个也适合其他保存文件的插件，这里关键的技术就是dataURItoBlob()，可以将base64编码的字符串转化为二进制。

...

function errorHandler(err) {

console.info(err);

}

/**

* base64 转 blob 对象，文件上传

* @param dataURI

* @returns {Blob}

*/

function dataURItoBlob(dataURI) {

var byteString = atob(dataURI.split(',')[1]);

var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

var ab = new ArrayBuffer(byteString.length);

var ia = new Uint8Array(ab);

for (var i = 0; i < byteString.length; i++) {

ia[i] = byteString.charCodeAt(i);

}

return new Blob([ab], {type: mimeString});

}

//保存到本地

function saveFile(dirEntry, image, filename) {

console.info(image);

//创建文件

dirEntry.getFile(filename, { create: true }, function (fileEntry) {

fileEntry.createWriter(function (fileWriter) {

fileWriter.onwriteend = function (info) {

console.log('保存成功',info);

}

fileWriter.onerror = function (err) {

console.error('写入文件失败：' + err.toString());

}

var dataObj = dataURItoBlob(image);

fileWriter.write(dataObj);

});

}, errorHandler);

}

$scope.imageExportCordova = function(dirEntry){

var canvas = document.querySelector("#canvas");

if(!canvas)return;

var strDataURI = canvas.toDataURL("image/jpeg");

var backupFilename = 'exapmle.jpg';

saveFile(dirEntry, strDataURI, backupFilename);

};

$scope.imageExport = function() {//导出函数，调用这里就够了

window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function (dirEntry) {

$scope.imageExportCordova(dirEntry);

}, errorHandler);

}

...