文件的保存--Canvas的基本操作

最新推荐文章于 2022-07-22 20:00:54 发布

珊瑚贝

最新推荐文章于 2022-07-22 20:00:54 发布

阅读量495

点赞数

分类专栏：编程开发

本文链接：https://blog.csdn.net/chenzhao635/article/details/104139232

版权

编程开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

canvas API保存文件的原理实际上是把当前的绘画状态输出到一个data URL地址所指向的数据中的过程，所谓data URL，是指目前大多数浏览器能够识别的一种base64位编码的URL。
最近测试，发现在谷歌浏览器不能打开，用火狐浏览器可以。

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>文件的保存</title>  
<script >
function draw(id)
{  
    var canvas = document.getElementById(id);  
    var context = canvas.getContext('2d'); 
    context.fillStyle = "rgb(0, 0, 255)";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "rgb(0, 255, 0)";
    context.fillRect(10, 20, 50, 50); 
    window.location =canvas.toDataURL("image/jpeg"); 	
}
</script>  
</head>  
<body onload="draw('canvas');">  
<canvas id="canvas" width="400" height="300" />  
</body>  
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

珊瑚贝

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文件的保存--Canvas的基本操作

canvas API保存文件的原理实际上是把当前的绘画状态输出到一个data URL地址所指向的数据中的过程，所谓data URL，是指目前大多数浏览器能够识别的一种base64位编码的URL。最近测试，发现在谷歌浏览器不能打开，用火狐浏览器可以。<!DOCTYPE html> <head> <meta charset="UTF-8&quot...
复制链接

扫一扫