很多时候绘制完成的图片需要保存，那么我们就可以使用到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. DOM盒子模型

    获取行间样式 style.height //获取行间样式高度 xx.currentStyle.height //计算后的样式高度 IE低版本 getComputedStyle().height //获 ...

  2. 在ASP.Net环境中，当用户点击报表中的超链接时如何调用Java Script方法？

    问题描述:在ASP.Net环境中,当用户点击报表中的超链接时如何调用Java Script方法? 问题解答: 你可以在TextObject.Hyperlink对象中编写js代码(javascript: ...

  3. linux 更改文件夹所有者

    更改“tp5”文件的所有者为”www” chown -R tp5/ www 修改目录及其子目录的用户组为“www” chgrp -R www tp5 同时更改文件或目录的所有者和用户组 chown - ...

  4. 20155205 2016-2017-2 《Java程序设计》第5周学习总结

    20155205 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 如果没有try的话,出现异常会导致程序崩溃,而try则可以保证程序的正常运行下去.( ...

  5. ADB not responding

    1.如下错误: 2.执行 如下代码 : netstat -aon|findstr "5037" 3.打开任务管理器  找到PID 为 5536 的进程  将该进程关闭 4.重启 A ...

  6. JavaScript之DOM概念

    一.DOM概念 1.DOM是什么? 1.1 起源.DOM起源于Netscape与Microsoft 公司的DHTML(动态HTML). 1.2 名词解释.Document Object Model,文 ...

  7. $Miller Rabin$总结

    \(Miller Rabin\)总结: 这是一个很高效的判断质数的方法,可以在用\(O(logn)\) 的复杂度快速判断一个数是否是质数.它运用了费马小定理和二次探测定理这两个筛质数效率极高的方法. ...

  8. python - 计算器 程序练习

    v1.0 计算器(数据内不含括号方式:) import re def jisuan(a,b,c): sun_count = 0 if c =="+": sun_count = st ...

  9. 从Nexus私服下载和上传资源（一）

    从私服中下载资源 首先要明确将资源下载到哪里 找到maven 配置文件settings.xml 文件,添加如下配置:1.添加镜像配置:将所有访问外网仓库的请求指向私服: <mirror> ...

  10. Latex 公式居中

    这么简单的功能要是还要加工具包,LaTeX也不用混了~ 公式用\[...\]来写可以达到公式居中效果. 或者在equation环境外加center环境: \begin{center} \begin{e ...