<!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. CAP理论-解析

          分布式系统的CAP理论:理论首先把分布式系统中的三个特性进行了如下归纳:● 一致性(C):在分布式系统中的所有数据备份,在同一时刻是否同样的值.(等同于所有节点访问同一份最新的数据副本) ...

  2. javaweb servlet jsp简单笔记

    第二章: 1: web 俗称 : 万维网  www 2: web开发 的三大核心: HTML(网页) ,URL(定位),HTTP:(协议) 页面的分类: 静态页面: html+css 动态页面:jsp ...

  3. ArcGIS DataStore手册——入门篇

    第一章:ArcGIS DataStore入门 1.ArcGIS DataStore简介 ArcGIS DataStore是ArcGIS10.3推出来的一个全新的组件,它是一个关系型数据库管理系统,用于 ...

  4. Windows API 编程----将错误代码转换成错误描述信息

    Windows编程有时会因为调用函数而产生错误,调用GetLastError()函数可以得到错误代码.如果错误代码为0,说明没有错误:如果错误代码不为0,则说明存在错误. 而错误代码不方便编程人员或用 ...

  5. 基础架构之日志管理平台搭建及java&net使用

    在现代化的软件开发流程中,日志显得非常的重要,不可能再零散的游离在各个项目中,等查看日志的时候再登录服务器去到特定的目录去查看,这显然很繁琐且效率低下,所有整合一套日志管理平台,也显得非常重要,这篇文 ...

  6. Codeforces Round #413 A. Carrot Cakes

    A. Carrot Cakes time limit per test   1 second memory limit per test   256 megabytes   In some game ...

  7. 怎么区分odd和even

    odd [ɒd] 和even ['iːv(ə)n] 一个表示奇数.一个表示偶数 经常混淆. 一个记住的好方法: odd是3个字母,单数,所以表示奇数 even是4个字母,所以表示偶数

  8. 基于bootstrap的手机界面tab样式调整

    这是调整后手机页面的样子(pc端的样式还是bootstrap原来的样式,没有改变的): html结构为: <div class="tab" role="tabpan ...

  9. python requests实现windows身份验证登录

    1.安装ntlm  https://github.com/requests/requests-ntlm pip install requests_ntlm 2.使用 import requests f ...

  10. ROS Create a Catkin Workspace

    Step1 : First, create the top level catkin workspace directory and a sub-directory named src (pronou ...