<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <canvas id="canvas" width="500" height="500"></canvas>

     <script>

         var canvas = document.createElement('canvas');

         var ctx = document.getElementById('canvas').getContext('2d');

         ctx.beginPath();

         ctx.strokeStyle = 'red';

         ctx.moveTo(100, 100);

         ctx.lineTo(100, 200);

         ctx.stroke();

         var img = new Image();

         img.src = '1.png';

         img.onload = function(){

             ctx.drawImage(img, 100, 100, 150, 100);

         };

         var base64_url = canvas.toDataURL('image/jpeg', 0.5);

     </script>

 </body>

 </html>

使用canvas输出base64_url的更多相关文章

  1. 用H5中的Canvas等技术制作海报

    在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...

  2. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  3. canvas相关api

    1.线性径变:ctx.createLinearGradient(): var grd=ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,' ...

  4. canvas+js+面向对象的矩形封装

    效果: Rect.js /* 1. 封装属性: x, y w , h, fillStyle strokeStyle rotation opacity 2.render */ function Rect ...

  5. Svg和canvas的区别，伪类选择器有哪些（归类）

    区别一:svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改.canvas输出的是一整幅画布: 区别二:svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会是 ...

  6. canvas、svg、canvas与svg的区别

    一.canvas canvas 画布,位图 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形 注意:不要在style中给canvas设置宽高,会有位移差 can ...

  7. 在web中绘制图像 -- canvas篇

    汗,不小心点击发布了.其实正在编辑中...... HTML Canvas是现代浏览器中非常棒的绘图技术,Canvas可以绘制图形,操作图片,制作游戏,创建动画等:Canvas是很容易使用的,下面我们来 ...

  8. 前端图片canvas，file，blob，DataURL等格式转换

    将file转化成base64 方法一:利用URL.createObjectURL() <!DOCTYPE html> <html> <head> <title ...

  9. SVG和Canvas的区别？

    什么是SVG? SVG(可缩放矢量图形)编辑可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 什么是 Canvas ...

随机推荐

  1. SQL COUNT DISTINCT

    Create table trade ( sell_id int,  --卖家 buy_id int, -- 卖家 time date --交易时间 ) sell_id, buy_id, time s ...

  2. ES6中的import()函数

    import(specifier) 上面代码中,import函数的参数specifier,指定所要加载的模块的位置.import命令能够接受什么参数,import()函数就能接受什么参数,两者区别主要 ...

  3. csharp: Request.Form,Request.QueryString,Request.Params,Request.Cookies

    /// <summary> /// Request.Form,Request.QueryString,Request.Params /// http://msdn.microsoft.co ...

  4. Linux基础之-Bash命令优先级

    一. Bash简介 命令解释器,也就是 Bourne Again Shell,起源于shell.shell俗称壳,它是指UNIX系统下的一个命令解析器:主要用于用户和系统的交互.UNIX系统上有很多种 ...

  5. 【转】B树、B-树、B+树、B*树、红黑树、 二叉排序树、trie树Double Array 字典查找树简介

    B  树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: ...

  6. Re-thinking Deep Residual Networks

    本文是对ImageNet 2015的冠军ResNet(Deep Residual Networks)以及目前围绕ResNet这个工作研究者后续所发论文的总结,主要涉及到下面5篇论文. 1. Link: ...

  7. java反射机制的简单介绍

    参考博客: https://blog.csdn.net/mlc1218559742/article/details/52754310 先给出反射机制中常用的几个方法: Class.forName (& ...

  8. Windows下Python2与Python3两个版本共存的方法详解

    来源:http://www.jb51.net/article/105311.htm 这篇文章主要介绍了Windows下Python2与Python3两个版本共存的方法,文中介绍的很详细,对大家具有一定 ...

  9. Springmvc ajax跨域请求处理

    上次给一个网站写网站  前后端分离 最后跪在ajax跨域上面了  自己在网上找了个方法  亲试可用  记录一下 写一个类  继承HandlerInterceptorAdapter package co ...

  10. SpringMVC学习（一）——概念、流程图、源码简析

    学习资料:开涛的<跟我学SpringMVC.pdf> 众所周知,springMVC是比较常用的web框架,通常整合spring使用.这里抛开spring,单纯的对springMVC做一下总 ...