关于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);
}
...本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/09/02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录