将canvas画布内容转化为图片（toDataURL()，创建url）

总结

1、现在的浏览器都支持右键另存为图片的方法来将canvas画布内容转化为图片

2、在代码里面可以通过toDataURL()来操作

 

学习要点

canvas画布内容导出为图像

  • toDataURL()这个方法能把画布里的图案转变成base64编码格式的png，然后返回 Data URL数据。
  • 温馨提示：以前多数浏览器不支持canvas中的内容直接右键保存为图片格式。但现在大多数浏览器都是支持的。

样例

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>8-23 课堂演示</title>

     <script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>

 </head>

 <body>

     <canvas id="myCanvas" width="300" height="300" style="background: #A9A9A9">

             很抱歉，您的浏览器暂不支持HTML5的canvas

     </canvas>

     <img id="img1" src="" alt="">

     <script>

         var c=document.getElementById("myCanvas");

             var ctx=c.getContext("2d");

             var imgData=ctx.createImageData(300,300);

             var img1=document.getElementById('img1')

             for (var i=0;i<imgData.data.length;i+=4)

               {

                 g=Math.floor((i*i+4*i+30)%255)

                   imgData.data[i+0]=g;

                   imgData.data[i+1]=g;

                  imgData.data[i+2]=255;

                   imgData.data[i+3]=255;

             }

             ctx.putImageData(imgData,0,0);

             var imgsrc=c.toDataURL()

             // alert(imgsrc)

             img1.src=imgsrc

     </script>

     <script>

             // jc.start('myCanvas',true);

             // jc.circle(150,120,50,'rgb(0,255,0)',true);

       //       jc.circle(100,120,50,'rgba(255,0,0,0.5)',true);

       //       jc.circle(125,140,50,'#0000ff',true).id('c1');

       //       jc('#c1').color('rgba(250,100,180,1)')

             // jc.start('myCanvas');

     </script>

 </body>

 </html>

将canvas画布内容转化为图片（toDataURL()，创建url）的更多相关文章

  1. 用JavaScript将Canvas内容转化成图片的方法

    上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用.有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它.我们也想有100万美元 ...

  2. 将HTML5 Canvas的内容保存为图片借助toDataURL实现

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

  3. 清除canvas画布内容--点擦除+线擦除

    清空canvas画布内容 1.重置宽或高 由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况) var c=document.get ...

  4. 如何将Canvas中内容保存为图片

    Bitmap bm = Bitmap.createBitmap(320, 480, Config.ARGB_8888); Canvas canvas = new Canvas(bm); Paint p ...

  5. 将HTML5 Canvas的内容保存为图片

    主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现 HTML + JavaScript的代码很简单. 代码如下: <html> <meta http- ...

  6. Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

    由于客户的需求,将js写出来的一个统计能够保存到本地.作为码奴的我只能慢慢搬砖咯!一开始使用的是html2canvas.js.功能是可以实现,但是有缺陷.话不多说开始搞! 1.引入几个JS库 ①:jq ...

  7. canvas绘画基础(一)：认识canvas画布

    html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...

  8. canvas toDataURL() 方法如何生成部分画布内容的图片

    HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI .可以使用 type参数其类型,默认为 PNG 格式.图片的分辨率为96dpi. 如果画布的高 ...

  9. html dom 转化成图片踩坑记（canvas toDataURL）

    需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...

随机推荐

  1. jQuery，遍历表格每个单元格数据。

    <table class="table table-hover table-bordered"> <thead> <tr> <th > ...

  2. 如何在linux使用nmap端口扫描工具扫描网段内开放的端口

    在另一个linux主机上,使用nmap命令即可 ,比如 我在1.1.1.2上开放了端口1111 -A -j ACCEPT 在1.1.1.1上执行 即可查到

  3. 04JavaScript程序语句

    JavaScript程序语句 2.6程序控制流程 2.6.1选择结构 if <逻辑表达式> 语句 else 语句 if <逻辑表达式> { 语句组 } else { 语句组} ...

  4. ORB-SLAM2:一种开源的VSLAM方案（译文）

    摘要: ORB-SLAM2是基于单目,双目和RGB-D相机的一套完整的SLAM方案.它能够实现地图重用,回环检测和重新定位的功能.无论是在室内的小型手持设备,还是到工厂环境的无人机和城市里驾驶的汽车, ...

  5. 微服务网关从零搭建——（七）更改存储方式为oracle

    资源准备: 下载开源项目 新建oracle表: -- ---------------------------- -- Table structure for OcelotGlobalConfigura ...

  6. Linux内核-内存回收逻辑和算法（LRU）

    Linux内核内存回收逻辑和算法(LRU) LRU 链表 在 Linux 中,操作系统对 LRU 的实现主要是基于一对双向链表:active 链表和 inactive 链表,这两个链表是 Linux ...

  7. windows10下win+R快速打开程序

    按下win+R进入运行窗口,输入应用程序名称按下回车键 即可打开该应用,若提示“windows找不到文件”,请看下一步 可以采用建立统一的目录管理,新建目录“F:/local/bin” 将新建目录的路 ...

  8. 转自王垠Blog——写给清华大学的退学申请

    清华梦的粉碎—写给清华大学的退学申请(转自王垠Blog)   清华梦的诞生 小时候,妈妈给我一个梦.她指着一个大哥哥的照片对我说,这是爸爸的学生,他考上了清华大学,他是我们中学的骄傲.长大后,你也要进 ...

  9. 无插件纯Web HTML5 3D机房 进阶篇（新增设备、线缆、巡查等功能）

    前情提要 前阵子写了一篇无插件纯Web 3D机房,介绍了如何用html5在网页上创建无插件的精美3d机房场景.这两个月以来,陆续收到很多朋友的鼓(膝)励(盖),受宠若惊之余,对索要源代码的朋友都已经尽 ...

  10. P1048 采药(洛谷,动态规划递推,01背包原题)

    题目直接放链接 P1048 采药 这题只是01背包+背景故事而已 原题来的 PS:我写了一篇很详细的01背包说明,如果下面ac代码有看不懂的地方可以去看看 对01背包的分析与理解(图文) 下面上ac代 ...