js实现canvas保存图片为png格式并下载到本地的方法

 更新时间:2017年08月31日 15:50:15   作者:AaronHuang  
本篇文章主要介绍了js实现canvas保存图片为png格式并下载到本地的方法,非常具有实用价值,需要的朋友可以参考下

整理文档,搜刮出一个js实现canvas保存图片为png格式并下载到本地的方法,稍微整理精简一下做下分享。

1.canvas 保存图片

2.下载到本地

function base64Img2Blob(code){

        var parts = code.split(';base64,');

        var contentType = parts[0].split(':')[1];

        var raw = window.atob(parts[1]);

        var rawLength = raw.length;

 

        var uInt8Array = new Uint8Array(rawLength);

 

        for (var i = 0; i < rawLength; ++i) {

         uInt8Array[i] = raw.charCodeAt(i);

        }

 

        return new Blob([uInt8Array], {type: contentType}); 

      }

      function downloadFile(fileName, content){

        

        var aLink = document.createElement('a');

        var blob = base64Img2Blob(content); //new Blob([content]);

        

        var evt = document.createEvent("HTMLEvents");

        evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错

        aLink.download = fileName;

        aLink.href = URL.createObjectURL(blob);

     

        aLink.dispatchEvent(evt);

      }      

downloadFile('ship.png', canvas.toDataURL("image/png")); 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    这篇文章主要介绍了JS常见DOM节点操作,结合实例形式分析了JavaScript针对DOM节点的创建 ,插入,删除,复制,查找等操作相关函数与使用技巧,需要的朋友可以参考下
    2018-05-05
  • js中json处理总结之JSON.parse

    js中json处理总结之JSON.parse

    parse是解析json数据多种方法中的其中一种。这篇文章主要介绍了js中json处理总结之JSON.parse,需要的朋友可以参考下
    2016-10-10
  • 详解基于webpack2.x的vue2.x的多页面站点

    详解基于webpack2.x的vue2.x的多页面站点

    本篇文章主要主要介绍了基于webpack2.x的vue2.x的多页面站点 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • javascript实现类似百度分享功能的方法

    javascript实现类似百度分享功能的方法

    这篇文章主要介绍了javascript实现类似百度分享功能的方法,以实例形式较为完整的分析了基于javascript实现百度分享功能所涉及的样式与分享功能实现方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript实现简易tab栏切换内容栏

    JavaScript实现简易tab栏切换内容栏

    这篇文章主要为大家详细介绍了JavaScript实现简易tab栏切换内容栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • JS实现简单的下雪特效示例详解

    JS实现简单的下雪特效示例详解

    很多南方的小伙伴可能没怎么见过或者从来没见过下雪,这篇文章小编给大家带来一个小Demo,模拟了下雪场景。感兴趣的小伙伴快来跟随小编一起学习一下吧
    2021-12-12
  • 原生js实现随机点餐效果

    原生js实现随机点餐效果

    一款十分简单的原生js实现的随机点菜代码,点击点菜按钮随机点取上面菜单的菜品,可根据需求改成自己需要功能,比如说随机点名。感兴趣的朋友来参考实现代码吧
    2019-12-12
  • JavaScript股票的动态买卖规划实例分析下篇

    JavaScript股票的动态买卖规划实例分析下篇

    这篇文章主要介绍了JavaScript对于动态规划解决股票问题的真题例举讲解。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • fabric.js实现diy明信片功能

    fabric.js实现diy明信片功能

    这篇文章主要为大家详细介绍了fabric.js实现diy明信片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • js仿京东轮播效果 选项卡套选项卡使用

    js仿京东轮播效果 选项卡套选项卡使用

    这篇文章主要为大家详细介绍了js仿京东轮播效果,选项卡里套选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论