很多时候绘制完成的图片需要保存，那么我们就可以使用到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---RabbitMQ（3）exchange中关键字发送direct（组播）

    设置关键字,交换机根据消费者传递的关键字判断是否与生产者的一致,一致则将数据传递给消费者 可以实现对消息分组 生产者: # coding:utf8 # __author: Administrator ...

  2. idea出现乱码问题

    Intellij Idea打包工程时控制台显示乱码 这主要是maven编译时编码问题导致的.在Intellij的settings中maven的run配置中设置它的VM Options为-Darchet ...

  3. socket技术详解（看清socket编程）

    socket编程是网络常用的编程,我们通过在网络中创建socket关键字来实现网络间的通信,通过收集大量的资料,通过这一章节,充分的了解socket编程,文章用引用了大量大神的分析,加上自己的理解,做 ...

  4. VS中空项目、win32项目、控制台程序的区别（转）

    空项目,大多数想单纯创建c++工程的新同学,打开vs后很可能不知道选择创建什么工程,这时候请相信我,空项目是你最好的选择.因为空工程不包含任何的源代码文件,接下来你只需要在相应的源代码文件夹和头文件文 ...

  5. Maven打包编译找不到com.sun.crypto.provider.SunJCE类

    Maven配置 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>mav ...

  6. Python GUI工具Tkinter以及拖拉工具Page安装

    如果使用Tkinter作为Python GUI工具,我们需要安装Tkinter,这个使用conda或者pip即可: conda install -c anaconda tk 为了提高界面编写效率,可以 ...

  7. 字符加密 Valentino 函数 （伪分治）

    题面 \(solution:\) 这一题重点不在字符串加密,而是我们最后的求值:\(K^{s}\mod M\)(\(s\leq36^{100000}\)) 而我们发现它的指数十分巨大,但众所周知的指数 ...

  8. vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事

    实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...

  9. Vue.js用脚手架创建项目

    安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js ...

  10. 解决：[DCC Fatal Error] **.dpk : E2202 Required package '***' not found

    //[DCC Fatal Error] **.dpk : E2202 Required package '***' not found 意思是:[DCC致命错误] *:e2202需包***没有发现 D ...