html5使用canvas实现图片下载功能的示例代码


Posted in HTML / CSS onAugust 26, 2017

最近项目中需要实现一个下载图片的功能(如下图)

html5使用canvas实现图片下载功能的示例代码

一开始考虑使用a标签的download属性进行下载:

<a href="图片src" download="下载海报">
下载海报
</a>

但是通过测试,发现再safari中,下载的文件不能带上拓展名,所以只好换一个思路,使用canvas进行处理。

1.图片需要添加crossOrigin='anonymous'设置图像的跨域属性

img.crossOrigin = 'anonymous';

2.使用toDataURL把图片转换成base64格式

canvas.toDataURL("image/png")

3.使用模拟点击事件,触发下载

var save_link = document.createElement('a');
     save_link.href = image;
     save_link.download ='测试.png';
                           
 var clickevent = document.createEvent('MouseEvents');
     clickevent.initEvent('click', true, false);
     save_link.dispatchEvent(clickevent);

完整代码:

var canvas = $('.canvas');
var cxt = canvas[0].getContext("2d");
function save(){
    var img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = function(){
        var _w = img.naturalWidth;
        var _h = img.naturalHeight;
        canvas.attr({width:_w,height:_h});
        cxt.drawImage(img,0,0);
        var image = canvas[0].toDataURL("image/png")
        var save_link = document.createElement('a');
        save_link.href = image;
        save_link.download ='测试.png';
                           
       var clickevent = document.createEvent('MouseEvents');
           clickevent.initEvent('click', true, false);
           save_link.dispatchEvent(clickevent);
    };
    img.src = 'http://n.sinaimg.cn/sports/transform/20170825/NZI3-    fykiufe6650492.jpg';
}

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

HTML / CSS 相关文章推荐
利用CSS3实现毛玻璃效果示例源码
Sep 25 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 #HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 #HTML / CSS
前端面试必备之html5的新特性
Sep 05 #HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 #HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 #HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 #HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 #HTML / CSS
You might like
PHP中extract()函数的定义和用法
2012/08/17 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
理解JSON:3分钟课程
2011/10/28 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
详解Python的Django框架中的中间件
2015/07/24 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
Python偏函数实现原理及应用
2020/11/20 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
超市端午节活动方案
2014/01/23 职场文书
校园文化标语
2014/06/18 职场文书
公司委托书范本5篇
2014/09/20 职场文书
python用字节处理文件实例讲解
2021/04/13 Python