使用canvas输出base64_url
<!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的更多相关文章
- 用H5中的Canvas等技术制作海报
在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...
- html5 中的SVG 和canvas
想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...
- canvas相关api
1.线性径变:ctx.createLinearGradient(): var grd=ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,' ...
- canvas+js+面向对象的矩形封装
效果: Rect.js /* 1. 封装属性: x, y w , h, fillStyle strokeStyle rotation opacity 2.render */ function Rect ...
- Svg和canvas的区别,伪类选择器有哪些(归类)
区别一:svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改.canvas输出的是一整幅画布: 区别二:svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会是 ...
- canvas、svg、canvas与svg的区别
一.canvas canvas 画布,位图 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形 注意:不要在style中给canvas设置宽高,会有位移差 can ...
- 在web中绘制图像 -- canvas篇
汗,不小心点击发布了.其实正在编辑中...... HTML Canvas是现代浏览器中非常棒的绘图技术,Canvas可以绘制图形,操作图片,制作游戏,创建动画等:Canvas是很容易使用的,下面我们来 ...
- 前端图片canvas,file,blob,DataURL等格式转换
将file转化成base64 方法一:利用URL.createObjectURL() <!DOCTYPE html> <html> <head> <title ...
- SVG和Canvas的区别?
什么是SVG? SVG(可缩放矢量图形)编辑可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 什么是 Canvas ...
随机推荐
- Java 不可变类
Java 不可变类 immutable object 不可变类是指这个类的实例一旦创建完成后,就不能改变其成员变量值. 如JDK内部自带的很多不可变类:Interger.Long和String等. * ...
- 使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结
打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools 背景 最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类 ...
- sql: T-SQL parent-child function script
--Parent-Child reationship --涂聚文 2014-08-25 --得位置的子節點函數表(包含本身) if exists (select * from dbo.sysobjec ...
- 洛谷P1155 双栈排序(贪心)
题意 题目链接 Sol 首先不难想到一种贪心策略:能弹则弹,优先放A 然后xjb写了写发现只有\(40\),原因是存在需要决策的情况 比如 \(A = {10}\) \(B = {8}\) 现在进来一 ...
- linux php多版本
ecshop还非php5.2 解压 gzip -cd php-5.2.14-fpm-0.5.14.diff.gz | patch -d php-5.2.14 -p1 打上php-fpm补丁再安装php ...
- Android TabHost切换选项卡实现数据实时刷新
手机界面大小有限,使用TabHost可以达到在一个Activity中放入多个容器(界面)的效果.但存在一个问题是,当数据信息在一个容器(界面)中有所改变时,需要在用户切换选项卡到其他容器(界面)的时候 ...
- 【Udacity】解决:字幕遮挡视频内容怎么办?Udacity字幕大小调整
字幕有没有办法显示在最下方,否则把内容挡住了,根本看不清老师所指的内容 Chrome 的小插件,能方便地调节视频的字幕大小,譬如:Udacity 的学习视频字幕大小不能调节,有时候不想它占太多位置,而 ...
- Retrofit 抽象工厂模式
https://blog.csdn.net/h176nhx7/article/details/78139371
- ES6入门——变量的解构赋值
1.数组的解构赋值 以前为变量复制,只能直接指定值.现在ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 本质上,这种写法属于模式匹配,只要等 ...
- androidwebview网页显示事件
@Overridepublic void onPageCommitVisible(WebView view, String url) { super.onPageCommitVisible(view, ...