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

這就是獲取數(shù)據(jù)的方法，網(wǎng)上都很多這樣的代碼。但是，如何保存呢？

1.保存圖片

可以以流的方式保存下來(lái)，親測(cè)可行。

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該方法是不行的，默認(rèn)是不支持的。一種方法是在android的java代碼寫(xiě)js接口，而一個(gè)純webapp，確是很難做到（其實(shí)也不是），只不過(guò)找了大半天，都沒(méi)找到。

2.webapp支持保存圖片

相關(guān)依賴：

• angularjs
• cordova
• cordova-plugin-file（插件）

cordova plugin add cordova-plugin-file

資料：圖片base64與blob互轉(zhuǎn)

當(dāng)然這個(gè)也適合其他保存文件的插件，這里關(guān)鍵的技術(shù)就是dataURItoBlob()，可以將base64編碼的字符串轉(zhuǎn)化為二進(jìn)制。

...
function errorHandler(err) {
    console.info(err);
}

    /** 
* base64 轉(zhuǎn) blob 對(duì)象，文件上傳
* @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);
    //創(chuàng)建文件
    dirEntry.getFile(filename, { create: true }, function (fileEntry) {
        fileEntry.createWriter(function (fileWriter) {
            fileWriter.onwriteend = function (info) {
                console.log('保存成功',info);
            }
            fileWriter.onerror = function (err) {
                console.error('寫(xiě)入文件失?。? + 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() {//導(dǎo)出函數(shù)，調(diào)用這里就夠了
    window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function (dirEntry) {
        $scope.imageExportCordova(dirEntry);
    }, errorHandler);
}
...