很多时候绘制完成的图片需要保存，那么我们就可以使用到Canvas API来完成这最后一步！

Canvas API使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载，然后我们就可以把重新装载后的文件直接保存。

Canvas API保存文件的原理实际上就是把我们绘画的状态动态输出到一个data URL地址所指向的数据中的过程。

什么是data URL？
data URL实际上就是base64位编码的URL，主要用于小型的，可以在网页中直接嵌入，而不需要从外部嵌入数据，比如img元素里面的图像。

data URL的格式“data:image/jpeg;base64,/9j/....”

toDataURL的使用方法
canvas。toDataURL(type);
这个方法使用一个参数type，表示输出数据的MIME类型。
什么是MIME类型：
jpg image/jpeg

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>canvas图像保存</title>

        <script src="js/canvas.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body onload="draw('canvas')">

    <canvas id="canvas" width="400" height="300"></canvas>

    </body>

</html>
function draw(id){

    var canvas = document.getElementById(id);

    var context = canvas.getContext('2d');

    context.fillStyle = "green";

    context.fillRect(0,0,400,300);

    window.location = canvas.toDataURL('images/jpeg');

}

canvas图像保存的更多相关文章

  1. PHP《将画布(canvas)图像保存成本地图片的方法》

    用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...

  2. 转载：将画布(canvas)图像保存成本地图片的方法

    之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...

  3. 【HTML5】Canvas图像

    把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象.   显示一个canvas图像: <!DOCTYPE html> &l ...

  4. javacpp-opencv图像处理之1：实时视频添加文字水印并截取视频图像保存成图片，实现文字水印的字体、位置、大小、粗度、翻转、平滑等操作

    欢迎大家积极开心的加入讨论群 群号:371249677 (点击这里进群) javaCV图像处理系列: javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置. ...

  5. 如何实现Canvas图像的拖拽、点击等操作

    上一篇Canvas的博文写完后,有位朋友希望能对Canvas绘制出来的图像进行点击.拖拽等操作,因为Canvas绘制出的图像能很好的美化.好像是想做炉石什么的游戏,我也没玩过. Canvas在我的理解 ...

  6. Qt QImag图像保存、格式转换

    图像保存bool QImage::save(const QString &fileName, const char *format = Q_NULLPTR, int quality = -1) ...

  7. matlab 图像保存时去除白边

    很是讨厌MATLAB输出图像时自带的白边,尤其是当导出.eps格式时,很难通过编辑图片来去掉白边.网上有很多代码但是没有注释,有很多坑要填.这里提供一个去除白边的代码,自己在别人的基础上修改了而且加了 ...

  8. VisionPro · C# · 图像保存

    根据客户要求,每次视觉取像运行完毕后,按需保存OK或NG图像,图像分两种: 1.带视觉工具运行结果图像: 2.相机取像原图,.bmp格式. 保存图像代码如下: using System; using ...

  9. canvas图像以及剪切

    图像篇: 代码: 1 /** 2 * Created by Administrator on 2016/1/28. 3 */ 4 function draw (id){ 5 var canvas = ...

随机推荐

  1. 标准遗传算法（二进制编码 python实现）

    代码地址:https://github.com/guojun007/binary_sga 种群初始化: binary_sga/population_init/population_init.py #种 ...

  2. JAVA-大白话探索JVM-运行时内存（三）

    前面章节 JAVA-大白话探索JVM-类加载器(一) JAVA-大白话探索JVM-类加载过程(二) JVM运行时内存 通过之前的章节,我们知道.class类如何加载到内存中,如图红框 开始讲讲内存空间 ...

  3. aspectj 表达式 execution切点函数

    execution函数用于匹配方法执行的连接点,语法为: execution(方法修饰符(可选) 返回类型 方法名(参数) 异常模式(可选)) 参数部分允许使用通配符: *  匹配任意字符,但只能匹配 ...

  4. Spring集成mybatis时mybatis的映射XML配置

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  5. python学习笔记9--日志模块logging

    我们在写程序的时候经常会打一些日志来帮助我们查找问题,这次学习一下logging模块,在python里面如何操作日志.介绍一下logging模块,logging模块就是python里面用来操作日志的模 ...

  6. prompt更改MySQL登陆后的提示符

    临时生效 mysql> prompt \u@standby \r:\m:\s > PROMPT set to '\u@standby \r:\m:\s >' root@standby ...

  7. Java Web之路（一）Servlet

    前言 执行过程 Servlet 生命周期.工作原理:http://www.cnblogs.com/xuekyo/archive/2013/02/24/2924072.html Servlet的生命周期 ...

  8. LINQ to SQL 实现 GROUP BY、聚合、ORDER BY

    Ø  前言 本示例主要实现 LINQ 查询,先分组,再聚合,最后在排序.示例很简单,但是使用 LINQ 却生成了不同的 SQL 实现. 1)   采用手动编写 SQL 实现 SELECT ROW_NU ...

  9. 基于802.11Fuzz技术的研究

    转自安全客 关于无线的Fuzz最开始接触了解时,国内基本毛线都搜不到.经过几个月的资料搜集和学习,将大约全网的fuzz资料整理翻译分析并读懂写下,就为填补国内空白,也希望无线爱好者能多多交流. 在各个 ...

  10. mongoDB - 日常操作一

    mongodb 启动方式 # 不启动认证 ./mongod --bind_ip 172.16.2.17 --port --fork --logpath=/opt/mongodb/mongodb.log ...