<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <canvas id="drawing" width="200" height="200">A drawing of something</canvas>

    <script>

        var drawing = document.getElementById('drawing')

        if (drawing.getContext) { // 确定浏览器支持<canvas>元素

            // 使用 toDataURL()方法,可以导出在<canvas>元素上绘制的图像。

            // 这个方法接受一个参数,即图 像的 MIME 类型格式,而且适合用于创建图像的任何上下文

            // image/png, image/jpeg

            var imgURI = drawing.toDataURL('image/png')

            var image = document.createElement('img')

            image.src = imgURI

            document.body.appendChild(image)

        }

    </script>

</body>

</html>

-_-#【Canvas】导出在<canvas>元素上绘制的图像的更多相关文章

  1. 使用WebBrowser控件时在网页元素上绘制文本或其他自定义内容

    原文:使用WebBrowser控件时在网页元素上绘制文本或其他自定义内容 第一次在CNBlogs上发Post是提出一个有关使用WebBrowser控件时对SELECT网页元素操作的疑惑,这个问题至今也 ...

  2. canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

    canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) ...

  3. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  4. HTML5<canvas>标签:使用canvas元素在网页上绘制四分之一圆(3)

    前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: <!doctype html> ...

  5. 软件项目技术点(7)——在canvas上绘制自定义图形

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比 ...

  6. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  7. Canvas上绘制几何图形

    重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...

  8. 在<canvas>上绘制img（drawImage()）时需要注意的事

    <canvas>标签相当于是一个画布,css决定画布的样式(这块画布的背景颜色.大小等),脚本(一般使用JavaScript)就是画笔,我们可以在这个画布上绘制线条.形状.文字.图片等. ...

  9. Android 使用Canvas在图片上绘制文字

    一个小应用,在图片上绘制文字,以下是绘制文字的方法,并且能够实现自动换行,字体自动适配屏幕大小 private void drawNewBitmap(ImageView imageView, Stri ...

随机推荐

  1. Windows Minifilter驱动 - 调式 （4）

    写不论什么程序动态调试是很重要的.驱动开发也不例外. 通常如今写驱动的时候,都是在VM上跑的,调试手段基本也是本地windbg + 虚拟机. 虚拟机配置 我用的是win7, 第一步,看以下.成功运行后 ...

  2. 第五篇：R语言数据可视化之散点图

    散点图简介 散点图通常是用来表述两个连续变量之间的关系,图中的每个点表示目标数据集中的每个样本. 同时散点图中常常还会拟合一些直线,以用来表示某些模型. 绘制基本散点图 本例选用如下测试数据集: 绘制 ...

  3. [转] nginx+FastCGI+c++

    from: http://www.cnblogs.com/xiaouisme/archive/2012/08/01/2618398.html 一 安装 目的:不需支持php等.就html就行了.步骤: ...

  4. Analyzing UI Performance with Systrace 使用systrace工具分析ui性能

    While developing your application, you should check that user interactions are buttery smooth, runni ...

  5. HDU 5105 Math Problem

    让求  f(x)=|a∗x3+b∗x2+c∗x+d|(L≤x≤R)的最大值 这个题目讨论a和b的值,如果a==0的话,那么这个方程就变成了一个一元二次方程,直接找端点和对称轴(如果对称轴在给定的区间内 ...

  6. Android缓存技术

    android应用程序中 1. 尽可能的把文件缓存到本地.可以是 memory,cache dir,甚至是放进 SD 卡中(比如大的图片和音视频).    可以设置双重缓冲,较大的图片或者音频放到SD ...

  7. HDU 2639 （01背包第k优解）

    /* 01背包第k优解问题 f[i][j][k] 前i个物品体积为j的第k优解 对于每次的ij状态 记下之前的两种状态 i-1 j-w[i] (选i) i-1 j (不选i) 分别k个 然后归并排序并 ...

  8. 【开源java游戏框架libgdx专题】-01-libgdx介绍

    libgdx是一款开源的java游戏框架,而且还实现了Desktop/Android/BlackBerry/iOS/HTML5这些些平台的跨平台开发.官方网址:https://libgdx.badlo ...

  9. css.day04

    1. box   盒子模型 <p>   <span>   <hr/>   <div> css+   div  p  span css+  xhtml b ...

  10. Pgsql 里面 COALESCE的用法

    有这种要求,更新自己本身的字段的某个值进行加或者减, 常规方法: UPDATE tbl_kintai_print_his SET print_time = now(), print_emp_cd = ...