<!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. lintcode题目记录4

    Russian Doll Envelopes    Largest Divisible Subset     Two Sum - Input array is sorted Russian Doll ...

  2. ImportError: No module named bs4错误解决方法

    前言:毕业论文打算用Python做爬虫爬一些数据,最近开始入门Python: 在学习的时候遇到一个问题,按照看的文章安装了Python,也配置了相应的环境(使用window系统),使用pycharm编 ...

  3. python----openpyxl模块

    openpyxl 模块 1.openpyxl的写 from openpyxl import Workbook wb = Workbook() # 方式一: 默认创建sheet在最后 wb1 = wb. ...

  4. JavaScript总结摘要

    一 概述 1.什么是JavaScript? 基于对象.由事件驱动的解释性脚本语言. 2.JavaScript语法特点 区分大写小,这一点不同于HTML. 结尾的分号可有可无. 变量是弱类型的:变量在定 ...

  5. js中的this--执行上下文

    条件:函数调用的时候  才有执行上下文 this 不同情况的调用,this也不同 1)当函数直接打点调用,此时的this 是window 2)事件触发函数,此时的this是触发这个事件的对象 3)当对 ...

  6. 09_Redis持久化——AOF方式

    [AOF简述] AOF(Append-only) Redis每次接受到一条改变数据的命令时,它会把该命令写到一个AOF文件中(只记录写操作,不记录读操作),当Redis启动时,它通过执行AOF文件中的 ...

  7. Python爬虫教程-32-Scrapy 爬虫框架项目 Settings.py 介绍

    本篇介绍项目开发的过程中,对 Setting 文件的配置和使用 Python爬虫教程-32-Scrapy 爬虫框架项目 Settings.py 介绍 settings.py 文件的使用 想要详细查看 ...

  8. 【Web crawler】simulated DFS web crawler

    Finish crawl web learned from udacity 提示:在某些时候,你必须在page上调用get_page.这似乎违反直觉,但是我们用 page 这个词时,指的网页的网址 ( ...

  9. JavaScript中模块化工具require.js

    什么是require.js? RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代 ...

  10. 用opencv做的静态图片人脸识别

    这次给大家分享一个图像识别方面的小项目,主要功能是识别图像中的人脸并根据人脸在图片库找出同一个与它最相似的图片,也就是辨别不同的人. 环境:VS2013+opencv2.4.13 主要是算法:open ...