关于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

资料：图片base64与blob互转

当然这个也适合其他保存文件的插件，这里关键的技术就是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);
}
...