您的位置:澳门新葡8455最新网站 > Web前端 > canvas元素内容生成图像文件

canvas元素内容生成图像文件

发布时间:2019-12-09 15:19编辑:Web前端浏览(70)

    了解HTML/HTML5中的download属性

    2016/04/07 · HTML5 · 5 评论 · download

    原版的书文出处: 张鑫旭(@张鑫旭)   

    生龙活虎、download属性是个怎么着鬼?

    首先看下边这种截图:
    图片 1

    只要大家想完毕点击上边包车型客车下载开关下载一张图片,你会怎么着兑现?

    咱俩兴许会想到叁个最轻便易行的艺术,就是直接按键a标签链接一张图纸,雷同上面这样:

    <a href="large.jpg">下载</a>

    1
    <a href="large.jpg">下载</a>

    不过,想法虽好,实效却不是大家想要的,因为浏览器能够直接浏览图片,由此,大家点击上边包车型大巴“下载”链接,并是不下载图片,而是在新窗口直接浏览图片。

    下载

    看本人的眼眸,图片 2

    于是,基本上,方今的兑现都是扬弃HTML计策,而是接受,举例php那样的后端语言,通过报告浏览器header消息,来兑现下载。

    header('Content-type: image/jpeg'); header("Content-Disposition: attachment; filename='download.jpg'");

    1
    2
    header('Content-type: image/jpeg');
    header("Content-Disposition: attachment; filename='download.jpg'");

    但是,这种光景端都要操心的方法神烦,未来都流行前后端分离,还搅在联合太累了,认为不会再爱了。

    那有未有如何只供给前端动动手指就能够达成下载的措施吗?有,就是本文要介绍的download属性。

    比如,大家希望点击“下载”链接下载图片而不是浏览,直接增添叁个download属性就能够:

    <a href="large.jpg" download>下载</a>

    1
    <a href="large.jpg" download>下载</a>

    正确,你未曾看错,就这么截止了,不要紧点击前边的链接试试:下载

    结果在Chrome浏览器下(FireFox浏览器因为跨域节制无效):
    图片 3

    不止如此,我们还是能够钦点下载图片的公文名:

    <a href="index_logo.gif" download="_5332_.gif">下载</a>

    1
    <a href="index_logo.gif" download="_5332_.gif">下载</a>

    假定后缀名同样,大家还能缺省,直接文件名:

    <a href="index_logo.gif" download="_5332_">下载</a>

    1
    <a href="index_logo.gif" download="_5332_">下载</a>

    截图为虚,操作为实:下载

    Chrome下的截图效果含蓄表示:
    图片 4

    八个大写的酷里!

    希图干活

    想要将canvas成分当前展现的内容生成为图像文件,大家先是要获得canvas中的数据,在HTML5 <canvas>要素的正式中提供了toDataURL()的点子能够将canvas中的内容生成为钦赐格式的DataUWranglerL,使用形式如下:

    // 假设有一个id为cvs的canvas元素
    var dataurl = document.getElementById('cvs').toDataURL('image/png');
    

    我们现在亟待将DataU纳瓦拉L生成为三个png类型的图像文件,而且那几个操作是在本地完结的,不须要服务器扶持生成文书。以下提供三种办法:

    二、浏览器包容性和跨域计谋

    图片 5

    可是,caniuse体现的宽容性只是个笼统,根据鄙人的确切测量试验,事情要比见到的复杂性。

    关键呈以往跨域计谋的拍卖上,由于自家手上未有IE13,所以,只可以相比Chrome浏览器和FireFox浏览器:

    借使急需下载的财富是跨域的,包涵跨子域,在Chrome浏览器下,使用download品质是能够下载的,可是,并不可能重新载入参数下载的公文的命名;而FireFox浏览器下,则download属性是不行的,也等于FireFox浏览器无论怎样都不帮衬跨域能源的download品质下载。

    而,如若能源是同域名的,则八个浏览器都以通行的下载,不会冒出下载变浏览的情事。
    图片 6

    是不是辅助download属性的监测
    要监测当前浏览器是不是援救download品质,生龙活虎行JS代码就足以了,如下:

    var isSupportDownload = 'download' in document.createElement('a');

    1
    var isSupportDownload = 'download' in document.createElement('a');

    方法一 利用HTML5 <a>标签的download属性

    在HTML5正规中,<a>标签具有二个新的天性download,download属性用来指明该超链接指向的靶子是应有被下载的文书,比方

    <a href="http://www.jianshu.com" download>下载</a>
    

    download属性能够被赋值,用来指明下载文件的名目,举个例子

    <a href="http://www.jianshu.com" download="index.html">下载</a>
    

    三、结束语

    除了这几个之外图片能源,我们还足以是PDF财富,或然txt能源等等。越发Chrome等浏览器能够间接张开PDF文件,使得此文件格式必要download拍卖的情景更宽广。

    此HTML属性即使极度实用和方便人民群众,但是宽容性制约了我们的遍布使用。

    再者思谋到大多时候,须求进行局地下载的计算,纯前端的法门想要保存下载量数据,依然某个吃紧,需求跟开荒的同室同盟才行,还比不上选择古板艺术。

    所以,download属性的前景前程在哪个地方?当下是否能够直接投入到实在项目?还供给大家同盟能够思索。其实使用JS落成download质量的polyfill并简单,可是,思谋到为什么不持有浏览器都选取polyfill的艺术,又认为为了技能而技艺是不太稳妥的。

    简单的讲,先放着心上,再观望观看。

    1 赞 3 收藏 5 评论

    图片 7

    示例

    今昔,大家得以经过将DataUSportageL赋值给a标签的href属性,并且使用download属性使其生成为可下载的图纸。

    var dataurl = document.getElementById('cvs').toDataURL('image/png');
    var a = document.createElement('a');
    a.href = dataurl;
    a.download = "sample";
    a.click();
    

    兼容性

    日前唯有Chrome和FireFox帮助download属性

    方法二 修改DataURL的Mime-type

    倘使大家直接将得到的DataU奥迪Q3L赋值给a标签的href属性,在点击链接后浏览器只会在新窗口打开图片,并不会直接施行下载。大家得以改善DataUHavalL的Mime-type为octet-stream,强制让浏览器下载。

    示例

    var dataurl = document.getElementById('cvs').toDataURL('image/png').replace("image/png", "image/octet-stream");
    var tmpa = document.createElement('a');
    a.href = dataurl;
    a.target = "_blank";
    a.click();
    

    兼容性

    以此方式对于绝大多数主流浏览器都可用,但是octet-stream并不包蕴文件名和扩充名的音讯,所以利用那几个法子下载下来的文书是不曾扩充名的文本,浏览器大概暗中认可的命名字为“下载”或然“unknown”

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:canvas元素内容生成图像文件

    关键词: