很多时候绘制完成的图片需要保存，那么我们就可以使用到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. Array map()方法

    这里的map不是“地图”的意思,而是“映射”.“映射”就是原数组被“映射”成对应新数组. [].map()基本用法跟forEach类似. map()方法返回一个新数组,数组中的元素为原始数组元素调用函 ...

  2. Hive记录-Hive调优

    1.Join优化 a.map join b.reduce join 小表为驱动表,或直接将小表加载到内存,做map端join,它的关键字为/*+MAP JOIN(t1)*/ 如果想自动开启map端Jo ...

  3. Gym - 100085G - GCD Guessing Game

    原题链接 题意一个数字x在1-n之间,现在猜数字,每次猜一个数字a,告知gcd(x, a)的答案,问最坏情况下需要猜几次 分析 考虑素数.当猜的数为一组素数的乘积时,就可以把这些素数都猜出来.那么答案 ...

  4. Eclipse Groovy插件使用时出现的错误 org.eclipse.core.runtime.InvalidRegistryObjectException: Invalid registry object

    在eclipse marketplace中下载了groovy插件,发现使用的groovy版本跟项目中使用的groovy版本不一致. 于是在Preferences -> Groovy -> ...

  5. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...

  6. POJ3177 Redundant Paths【双连通分量】

    题意: 有F个牧场,1<=F<=5000,现在一个牧群经常需要从一个牧场迁移到另一个牧场.奶牛们已经厌烦老是走同一条路,所以有必要再新修几条路,这样它们从一个牧场迁移到另一个牧场时总是可以 ...

  7. Database学习 - mysql 数据库 表操作

    mysql 数据库 表操作 创建数据表 基本语法格式: 创建数据表: create table 表名( 字段名 datatype 约束, 字段名 datatype 约束, ...... ) 修改表名 ...

  8. python - str和repr方法:

    # python 内置__str__()和__repr__()方法: #显示自定制 # 示例1 # a = 123 # print(a.__str__()) # 示例2 class Test(): d ...

  9. C# ASP.NET MVC 配置允许跨域访问

    在web.config文件中的 system.webServer 节点下 增加如下配置 <httpProtocol> <customHeaders> <add name= ...

  10. python3之协程

    1.协程的概念 协程,又称微线程,纤程.英文名Coroutine. 线程是系统级别的它们由操作系统调度,而协程则是程序级别的由程序根据需要自己调度.在一个线程中会有很多函数,我们把这些函数称为子程序, ...