<!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. Html5本地存储+本地数据库+离线存储

    首先介绍什么叫存储: cache:通常把它叫做缓存,功能就是把从DB,或者磁盘拿出来的东西放在缓存里面,这样的话可以减少读取磁盘的IO. 磁盘文件:通常把一些图片或者一些视频都存放在磁盘上. 数据库: ...

  2. js实现字体和容器宽高随窗口改变

    用于字体大小和容器的宽高字体和宽高设为rem就可以了 var html = document.documentElement; function fonts(){ var hW = html.offs ...

  3. 关于echart 图表自适应问题的解决办法

    <div id="divEnergy" style="width: 100%; height: 300px; border: 5px solid red; &quo ...

  4. <Android 应用 之路> 百度地图API使用（3）

    前言 上一篇讲解并实践了百度地图基本显示,地图类型,实时交通图,热力图,地图控制和手势控制,今天看下在地图上添加view和覆盖物. 地图Logo不允许遮挡,可通过mBaiduMap.setPaddin ...

  5. Linux文件系统简介----转载

    原文地址:Linux文件系统 文件系统是linux的一个十分基础的知识,同时也是学习linux的必备知识. 本文将站在一个较高的视图来了解linux的文件系统,主要包括了linux磁盘分区和目录.挂载 ...

  6. EF多实体对应单表

    1.EF多实体对应单表 适用场景:单数据库表,表数据有较长用字段,有不常用或者大数据字段. 2.建表语句 CREATE TABLE [Chapter2].[Photograph]( ,) primar ...

  7. 任务十六：零基础JavaScript编码（四）

    任务目的 在上一任务基础上继续JavaScript的体验 深入学习JavaScript的事件机制及DOM操作 学习事件代理机制 学习简单的表单验证功能 学习外部加载JavaScript文件 任务描述 ...

  8. [转] RISC-V架构介绍

    1. RISC-V和其他开放架构有何不同 如果仅从"免费"或"开放"这两点来评判,RISC-V架构并不是第一个做到免费或开放的处理器架构. 在开始之前,我们先通 ...

  9. SQL Server ->> SQL Server 2016功能改进之 -- Update Statistics

    1) 以前SQL Server更新一张表/索引的间隔是固定的,创建时更新一次,到了500行时更新第二次,接下来就是呈百分比式的间隔去更新,距离数据修改量达到表的行数量的的20%再次触发更新.但是这样的 ...

  10. SQL Server ->> Database Promgramming Object Security Control（数据库编程对象安全控制）

    对于SQL Server内编程对象的安全控制是今天我在思考的问题.在MSDN上找到了几篇有用的文章. 首先微软推荐了三种做法: 1)第一种做法是在SQL Server中对一个应用程序对应创建应用程序角 ...