canvas和图片互转
原文:http://www.jb51.net/html5/160920.html
这么神奇么?先记录一下。
使用JavaScript将图片拷贝进画布
要想将图片放入画布里,我们使用canvas元素的drawImage方法:
代码如下:
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);</p>
<p> return canvas;
}
这里的0, 0参数画布上的坐标点,图片将会拷贝到这个地方。
用JavaScript将画布保存成图片格式
如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换成图片格式:
代码如下:
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
这段代码就能神奇的将canvas转变成PNG格式!
canvas和图片互转的更多相关文章
- canvas学习笔记:canvas对图片的像素级处理--ImageData的应用
学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...
- 快速解决Canvas.toDataURL 图片跨域的问题
出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...
- 用canvas实现图片滤镜效果详解之灰度效果
前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...
- 使用canvas进行图片裁剪简单功能
1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...
- 利用canvas 导出图片
1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...
- canvas将图片转为base64
最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
- [JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...
- canvas转图片
<script> var canvas, context2D, canvasimg, context2Dimg ,fontSize = 100; window.onload ...
- canvas和图片之间的互相装换
canvas和图片之间的互相装换 一.总结 一句话总结:一个是canvas的drawImage方法,一个是canvas的toDataURL方法 canvas drawImage() Image对象 c ...
随机推荐
- new usercontrol
http://www.codeproject.com/Articles/12421/The-Grouper-A-Custom-Groupbox-Control
- DataGridView中DataGridViewComboBoxColumn的一些相关应用(一)让其值改变时触发事件-转
转自 https://maodaili.de/mao.php?u=a%2FMrbEvUE8PnCuc7FrhJi0Rqd3kmOBHPZUbcJ1c2hbJUK0RYWpAf4lhIOddItP%2 ...
- 【Linux 进程】fork父子进程间共享数据分析
之前我们通过fork()函数,得知了父子进程之间的存在着代码的拷贝,且父子进程都相互独立执行,那么父子进程是否共享同一段数据,即是否存在着数据共享.接下来我们就来分析分析父子进程是否存在着数据共享. ...
- Compile、Make和Build的区别
针对Java的开发工具,一般都有Compile.Make和Build三个菜单项,完成的功能的都差不多,但是又有区别. 编译,是将源代码转换为可执行代码的过程.编译需要指定源文件和编译输出的文件路径 ...
- java_15 System类
1.System类 2.System类方法 (1)currentTimeMillis() public static void main(String[] args) { long start = S ...
- java_3选择与循环
1.三种执行顺序(流程控制语句) 在Java中,有三种执行结构,第一种:顺序结构.第二种:循环结构.第三种:选择结构. 2.顺序结构 自上而下,顺序执行. 3.循环结构 (1)while语句 初始化表 ...
- Java08-java语法基础(七)构造方法
Java08-java语法基础(七)构造方法 一.构造方法 1.什么是构造方法? 构造方法(类方法)是一个方法名和类名相容的特殊的成员方法. 2.构造方法的作用? 当使用new关键字创建一个对象时,为 ...
- check-versions.js和dev-client.js
// 用于在控制台输出带颜色字体的插件var chalk = require('chalk') // 语义化版本检查插件(The semantic version parser used by npm ...
- YII2中使用控制台命令
有些时候我们需要通过crontab在后台跑一些定时脚本,这时候就需要用到控制台命令了. 我们在commands目录下创建TestController.php,当然脚本的位置是可以随意指定的,只需要在c ...
- svn-经常遇到问题解答办法积累(一)
1.对于一个SVN使用新手,第一步,肯定是如何获取代码到本地指定的目录. 步骤: (1)新建一个存放svn中某一个代码库的目录,加入该目录命名为:Proj1SVN (2)右键鼠标,选择SVN Chec ...