zoukankan      html  css  js  c++  java
  • canvas元素内容生成图片

    转自https://segmentfault.com/a/1190000003853394

    想要将canvas元素当前显示的内容生成为图像文件,我们首先要获取canvas中的数据,在HTML5 <canvas>元素的标准中提供了toDataURL()的方法可以将canvas中的内容生成为指定格式的DataURL,使用方法如下:

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

    我们现在需要将DataURL生成为一个png类型的图像文件,并且这个操作是在本地完成的,不需要服务器帮助生成文件。以下提供两种方法:

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

    在HTML5标准中,<a>标签拥有一个新的属性download,download属性用来指明该超链接指向的目标是应该被下载的文件,例如

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

    download属性可以被赋值,用来指明下载文件的名称,例如

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

    示例

    现在,我们可以通过将DataURL赋值给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

    如果我们直接将获得的DataURL赋值给a标签的href属性,在点击链接后浏览器只会在新窗口打开图片,并不会直接执行下载。我们可以修改DataURL的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”

  • 相关阅读:
    523 vue组件化高级 插槽slot:slot基本使用,具名插槽,编译作用域,作用域插槽
    522 vue父子组件的访问方式: $children、$refs、$parent
    521 vue子组件向父组件传递数据
    520 vue父组件向子组件传递:props基本用法,props数据验证,props中的驼峰标识
    在 React 组件中使用 Refs 指南
    Flutter 代码开发规范
    Angular ZoneJS 原理
    vue中$refs, $emit, $on, $once, $off的使用
    详解Js加法运算符
    JavaScript 异常
  • 原文地址:https://www.cnblogs.com/zhoujl-5071/p/canvas.html
Copyright © 2011-2022 走看看