<!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. 二、NAT（地址转换模式）

    刚刚我们说到,如果你的网络ip资源紧缺,但是你又希望你的虚拟机能够联网,这时候NAT模式是最好的选择.NAT模式借助虚拟NAT设备和虚拟DHCP服务器,使得虚拟机可以联网.其网络结构如下图所示: NA ...

  2. 【转】JSON.parse()与JSON.stringify()的区别

    JSON.parse()[从一个字符串中解析出json对象] 例子: //定义一个字符串 var data='{"name":"goatling"}' //解析 ...

  3. 怎样关闭占用80端口的pid为4的进程

    我也被这个问题给纠结了好几天.重装系统都三次了.终于找到原因了:我用的是sqlserver 2008;解决方法:window-sqlserver 2008-配置工具-sqlserver 配置管理器 找 ...

  4. html发展史简介（摘抄）

    1993年,IETF,Internet工程任务组(Internet Engineering Task Force)的简写.IETF又叫互联网工程任务组,成立于1985年底,是全球互联网最具权威的技术标 ...

  5. Apache服务器运维笔记(2)----使用<IfDefine>容器实现不同的配置

    还有一种方法用来实现不同配置的Apache服务器启动,就是在一个配置文件中使用<IfDefine name> ... </IfDefine> 容器来定义,在<IfDefi ...

  6. Generic/Template Programming in Flink

    Generic/Template Programming in Flink SourceFunction<T> @Public public interface SourceFunctio ...

  7. 申请单位iOS开发者账号

    没有AppleID的需要先申请:此处略过: 1.登录苹果开发者官网(https://developer.apple.com),网速比较慢,多试几次 2. 点击 Enroll 切换到 简体中文 我以下述 ...

  8. 【Leetcode】【Medium】Search for a Range

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  9. 根据ip抓 包

    tcpdump -i any -s 0  host 101.81.134.53 -c 1000  -w ./zhj.cap

  10. linux命令整理

    Linux系统命令 1. ls 查看某个 目录下 所有文件的大小总和 ls -lR| awk 'BEGIN{size=0;} /^[-l]/{size+=$5;print $0;} END{print ...