HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
margin: auto auto;
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
<img id="img" src="" />
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* 图片处理函数 drawImage, 图片转化为 base64 格式 toDataURL
* drawImage(图形对象, sx, sy, sw, sh, dx, dy, dw, dh)
* s: 原图形
* d: 新图形
* x: 图形的起点横坐标
* y: 图形的起点纵坐标
* w: 图形的宽度
* h: 图形的高度
* toDataURL("图片格式, 默认为 image/png")
*/
var img = new Image();
img.src = "../img/background_2.jpg";
img.onload = function(){
cxt.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
var src = canvas.toDataURL("image/jpeg");
$('#img').attr('src', src);
}
</script>
HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL的更多相关文章
- 导出HTML5 Canvas图片并上传服务器功能
这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...
- HTML5 Canvas图片操作简单实例1
1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...
- HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点
用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...
- [js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...
- HTML5 canvas图像绘制方法与像素操作属性和方法
图像绘制方法 drawImage() 向画布上绘制图像.画布或视频 像素操作属性和方法 width 返回 ImageData ...
- html5 canvas图片渐变
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5 canvas图片翻转
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5 canvas图片反色
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5 canvas图片马赛克
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 2018-2019-2 20165212《网络对抗技术》Exp1 PC平台逆向破解
2018-2019-2 20165212<网络对抗技术>Exp1 缓冲区溢出实验 实验点1:逆向及Bof基础实践 实践任务 用一个pwn1文件. 该程序正常执行流程是:main调用foo ...
- hdu1355
题意:有一片矩形花生田在路的一侧,田上的整数坐标位置有0个或多个花生,现规定从路上走到田地最边上的某个格点位置.从田边上走回路上.从一个格点移动到另一个格点.采摘格点上的花生,这四种动作都要花费一单位 ...
- LG2731 骑马修栅栏 Riding the Fences
题意 John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个栅栏.你必须编一个程序,读入栅栏网络的描述,并计算出一条修栅栏的路径,使每个栅栏都恰好被经过一次.John能从任何一个顶点( ...
- day02 大型互联网架构演变历程笔记 和nigix和keepalived
PS:1.单个进程内,有多个线程,可以共享进程的内存空间2. 进程和进程之间通信比较麻烦, 会涉及 序列化和反序列化 PS :以一个交易网站看网站是如何变大的,网站的发展!!!! PS:随着请求的增加 ...
- java安全性-引用-分层-解耦
Java不支持指针, 一切对内存的访问都必须通过对象的实例变量来实现,这样就防止程序员使用 "特洛伊"木马等欺骗手段访问对象的私有成员 访问一个对象必须通过这个对象的引用 java ...
- Spring Cloud Netflix项目进入维护模式
任何项目都有其生命周期,Spring Could Netflix也不例外,官宣已进入维护模式,如果在新项目开始考虑技术选型时要考虑到这点风险,并考虑绕道的可能性. 原创: itmuch IT牧场 这 ...
- java 多线程之：join() 方法
join()介绍 join() 定义在java.lang.Thread中. join() 的作用:让"主线程"等待"子线程"结束之后才能继续运行.
- Yii2 环境配置生产环境和测试环境
默认的Debug配置 在入口文件web/index.php中 defined('YII_DEBUG') or define('YII_DEBUG', true);defined('YII_ENV') ...
- C/C++基础----类
IO类属于不能被拷贝的类型,因此只能通过引用来传递.同时读取和写入操作都会改变流的内容,所以接收的是普通引用. 类内的友元声明仅仅指定了访问的权限,需要在友元声明之外再专门对函数进行一次声明. 可变数 ...
- bzoj 2601: [Jsoi2011]同分异构体计数
Description Antonio 最近对有机化学比较感兴趣,他想请你帮助他快速计算出某种烃类的同分异 构体的数目. 为了表述方便,我们作出如下定义: 环烷烃: 具有n 个碳原子的环烷烃可 ...