<!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. win10系统把文件夹固定到任务栏

    为某个文件夹创建快捷方式 右键该快捷方式,选择固定到开始屏幕 点击win图标进入开始屏幕,在屏幕的右侧有刚才固定的快捷方式 右键该快捷方式,选择固定到任务栏即可.

  2. jquery选择器总结2

    1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的JS效果. 2.JQuery实现了 代码的分离 不用再网页 ...

  3. LG4768 [NOI2018]归程

    题意 题目背景 本题因为一些原因只能评测16组数据. 剩下的四组数据:https://www.luogu.org/problemnew/show/U31655 题目描述 本题的故事发生在魔力之都,在这 ...

  4. matplotlib的颜色及线条控制

    refer to: https://www.cnblogs.com/darkknightzh/p/6117528.html

  5. oracle之 获取建表ddl语句

    第一种方法是使用工具,如:pl/sql developer,在[工具]--[导出用户对象]出现就可以得到建表脚本. 第二种方法是,sql语句. DBMS_METADATA.GET_DDL包可以得到数据 ...

  6. Dynamics CRM 2011 快速查找 出现异常 QuickFindQueryRecordLimit exceeded. Cannot perform this operation 的解决方法

    一.CRM 2011 快速查找,输入编号的签名几个字母发现查询很慢. 图 1 当然在图1 上右边的出入框输入编号的部分的时候,有时候会发现数据在加载中..,非常慢,通过Crm Trace Log Vi ...

  7. Juery 实现淡出 淡现效果

    HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. 关于 android 读取当前手机号码

    手机号码不是所有的都能获取.只是有一部分可以拿到.这个是由于移动运营商没有把手机号码的数据写入到sim卡中.SIM卡只有唯一的编号,供网络与设备识别那就是IMSI号码,手机的信号也可以说是通过这个号码 ...

  9. 【FusionCharts学习-2】第一个FusionCharts程序

    获取资源 到官网:http://www.fusioncharts.com/download/ 获取FusionCharts文件: 目录结构: js目录下的文件: 创建项目 1. 项目名称:Fusion ...

  10. StringIO-将字符串当做文件处理

    StringIO将字符串当做文件处理,十分方便 >>> from StringIO import StringIO >>> file_like_string = S ...