很多时候绘制完成的图片需要保存，那么我们就可以使用到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. 关于Java形参和实参的理解

    源码地址:https://github.com/mynawang/javabasic-summary/tree/master/chapter01 1.方法的形参中,java的基本数据类型是传值调用,对 ...

  2. WinForm ListView虚拟模式加载数据 提高加载速度

    将VirtualMode 属性设置为 true 会将 ListView 置于虚拟模式.控件不再使用Collection.Add()这种方式来添加数据,取而代之的是使用RetrieveVirtualIt ...

  3. 我的vim插件配置

    set nocompatible " be iMproved, required filetype off " required " set the runtime pa ...

  4. SQL语句（二）创建带主键和约束的数据表

    内容摘要 创建带主键和约束的表 创建带组合主键和外键的表 1. 创建带主键和约束的表 Student (学生表) CREATE TABLE Student ( sclass ) NOT NULL, - ...

  5. MyBatis第一个案例的优化,通过映射文件与接口进行绑定

    1.创建表emp CREATE DATABASE mybatis; USE mybatis; CREATE TABLE emp( id INT(11) PRIMARY KEY AUTO_INCREME ...

  6. jdk学习之如何调试jdk

    自从sun被oracle收购后,在oracle下载的jdk使用F5进入调试jdk的方法就不行了,这对于想看jdk的源码的小伙伴是一个暴击(oracle在编译rt.jar时去除了调试信息): 这不得不鼻 ...

  7. Database学习 - mysql 数据库 多表/复合/子 查询

    多表查询 多表查询,基本规则,通过两表有关联字段的进行条件匹配查询 内连接查询 方式一: SELECT 查看字段名[,查看字段名] FROM 一表名,二表名 WHERE 一/二表.字段 = 一/二表. ...

  8. git操作之冲突解决

    应用场景,任哥,我两个人共同修改了git项目上的一个文件.zsh命令行模式 准备工作 简写命令解释 gl=git pullgp=git pushgst=git statusgcmsg=git comm ...

  9. springboot系列八、springboot整合kafka

    背景: 当业务在同一时间出现高并发的时候,这个时候我们不想无限的增加服务器,但是又想提高吞吐量.这时可以考虑使用消息异步处理,进行消峰填谷:同时还可以降低耦合度.常见的消息中间件有kafka,rabb ...

  10. zabbix3.0.4添加对指定进程的监控

    zabbix3.0.4添加对进程的监控: 主要思路: 通过 ps -ef|grep sdk-push-1.0.0.jar |grep -v grep|wc -l 这个命令来判断进程sdk-push是否 ...