<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            margin: auto auto;

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

    <img id="img" src="" />

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * 图片处理函数 drawImage, 图片转化为 base64 格式 toDataURL

     * drawImage(图形对象, sx, sy, sw, sh, dx, dy, dw, dh)

     * s: 原图形

     * d: 新图形

     * x: 图形的起点横坐标

     * y: 图形的起点纵坐标

     * w: 图形的宽度

     * h: 图形的高度

     * toDataURL("图片格式, 默认为 image/png")

     */

    var img = new Image();

    img.src = "../img/background_2.jpg";

    img.onload = function(){

        cxt.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

        var src = canvas.toDataURL("image/jpeg");

        $('#img').attr('src', src);

    }

</script>

HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL的更多相关文章

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

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

  2. HTML5 Canvas图片操作简单实例1

    1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...

  3. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  4. [js高手之路] html5 canvas教程 - 绘制七巧板

    七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...

  5. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  6. html5 canvas图片渐变

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. html5 canvas图片翻转

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. html5 canvas图片反色

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. html5 canvas图片马赛克

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. CTF-练习平台-WEB之 web2

    二.web2 打开连接发现... 在火狐浏览器里,按F12点击查看器就可以发现flag

  2. IIS目录

    一.目录浏览 一般网站部署后,需要禁用目录浏览, 若启用目录浏览的话,可以自定义开启哪些目录(只能根目录),和影藏哪些目录 iis中限制访问某个文件或某个类型的文件配置方法 注意:图片目录不要隐藏,不 ...

  3. 【正则表达式】java应用正则表达式

    一:简单应用 /** * * ' * & * ' * & * & * ' * ' * ' * sources=sdcg'hde&xyz'dfa&&ad' ...

  4. 先进驾驶员辅助系统ADSA

    ADSA(Advanced Driver-Assistance Systems)字面翻译过来是“先进驾驶员辅助系统”,实际上它是一种“辅助驾驶员更便捷更安全使用汽车”的系统. ADAS的研发历史可以追 ...

  5. JUC集合之 ArrayBlockingQueue

    ArrayBlockingQueue介绍 ArrayBlockingQueue是数组实现的线程安全的有界的阻塞队列. 线程安全是指,ArrayBlockingQueue内部通过"互斥锁&qu ...

  6. Linq to sql 增删改查（转帖）

    http://blog.csdn.net/pan_junbiao/article/details/7015633   (LINQ To SQL 语法及实例大全) 代码 Code highlightin ...

  7. MYSQL的空间查询(转帖)

    SELECT x(location),y(location) FROM frddata.points; 本文将向各位介绍如何使用MySql5.x中的空间数据库,并展示一下它高效的性能(前提是正确使用) ...

  8. golang中如何判断文件是否有可执行权限

    本文介绍在Go语言如何检查文件的权限.以检查文件可执行权限为例. 在文件系统中,文件的属性使用uint32表示. 例如 -rwxrwxrwx 判断可执行权限,也就是检查文件mode是否有: --x-- ...

  9. 阿里巴巴Java开发手册- 控制语句

    1. [强制]在一个 switch 块内,每个 case 要么通过 break / return 等来终止,要么注释说明程序将继续执行到哪一个 case 为止 : 在一个 switch 块内,都必须包 ...

  10. Flask请求处理流程（request）[待续]

    WSGI简介 WSGI(全称Web Server Gateway Interface),是为 Python 语言定义的Web服务器和Web应用程序之间的一种简单而通用的接口,它封装了接受HTTP请求. ...