专栏首页全栈之路关于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

资料:图片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);
}
...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《你不知道的js(上卷)》笔记1(基础知识和闭包)

    首先,读本书让我了解到js的最重要的两个知识点——闭包还有this指向,其次一点的就是编译原理和对象原形。

    陨石坠灭
  • vue项目引入markdown

    git地址:https://github.com/showdownjs/showdown 其实引入markdown挺简单的:

    陨石坠灭
  • HttpClient/HttpUrlConnect之代理、重定向、跨域和模拟登录(session)

    这样的工具类有点多,直接百度 “httpClient 工具类”或者 “HttpUrlConnect 工具类”

    陨石坠灭
  • js中的this关键字,setTimeout(),setInterval()的执行过程

    windseek
  • html2cavas实现生成图片

    任我行RQ
  • 重磅:2019上半年云安全趋势报告发布(附下载链接)

    腾讯安全与互联网安全新媒体FreeBuf联合出品《2019年上半年云安全趋势报告》。同时,报告基于腾讯安全对于国内云安全状况的分析,给出了可行的安全建议。 2...

    云鼎实验室
  • 微信小程序 Helloworld

    navigationBarTitleText窗口标题 backgroundColor 背景色

    用户5760343
  • Python 爬虫简单验证码识别和抓包

    Python知识大全
  • 来了,Python3.9

    今日推文说明: 次条是JS逆向连载文章, 三条是程序员工资统计,看看拖了后腿没有

    叫我龙总
  • Python 中文转Unicode字符串

    py3study

扫码关注云+社区

领取腾讯云代金券