canvas图像保存
2024-10-29 15:33:59
很多时候绘制完成的图片需要保存,那么我们就可以使用到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');
}
最新文章
- 小米网css3导航下拉菜单代码
- 【发布】工业串口和网络软件通讯平台(SuperIO v2.2.4)
- Java设计模式3:工厂方法模式
- [deviceone开发]-一个很炫的手势动画示例
- grootjs 简明教程
- preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead
- ONFI闪存数据通道接口标准
- JavaScript高级(01)
- dp水一天
- JAX-RPC 与 JAX-WS 的比较
- 鼠标拖拽定位和DOM各种尺寸详解
- Abnormal Detection(异常检测)和 Supervised Learning(有监督训练)在异常检测上的应用初探
- 2n的 位数
- linux 学习笔记 查看端口
- vue对比其他框架详细介绍
- 禁止单个IP或ip段访问
- Django具体操作(五)
- android.intent.category.DEFAULT
- AIX 与Linux 中crontab 介绍
- Face Alignment by Coarse-to-Fine Shape Searching--解析
热门文章
- .net视频教程代码之《提交注册内容》
- JS控制CSS3,添加浏览器兼容前缀
- CentOS下查找java环境变量
- SpringBoot对比SpringMVC,SpringMVC 处理请求过程
- Hyper-V和其他虚拟机共存 【转】
- 复选框QCheckBox
- C# 解决请求被中止:无法建立SSL / TLS安全通道问题
- django学习~forms
- Difference between plt.draw() and plt.show() in matplotlib
- 使用matplotlib绘制多个图形单独显示