function fImageToCanvas(image){
  var oCanvas = document.createElement("canvas");
  oCanvas.width = image.width;
  oCanvas.height = image.height;
  oCanvas.getContext("2d").drawImage(image,0,0);
  return oCanvas;
}

function fCanvasToImage(canvas){
  var oImage = new Image();
  image.src = canvas.toDataURL("image/png");
  return image;
}

参考:http://blog.csdn.net/renfufei/article/details/9855519

Canvas与Image互转的更多相关文章

  1. canvas和图片互转

    原文:http://www.jb51.net/html5/160920.html 这么神奇么?先记录一下. 使用JavaScript将图片拷贝进画布 要想将图片放入画布里,我们使用canvas元素的d ...

  2. 让自己也能使用Canvas

    <canvas> 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形.例如:画图,合成照片,创建动画甚至实时视频处理与渲染. 兼容性方面,除了一些骨灰级浏览器IE6.IE ...

  3. canvas三角函数应用

    这个是圆圈旋转的简单案例 var canvas=document.getElementById("canvas"); var cxt=canvas.getContext(" ...

  4. html5 canvas画图之图形随拖动而复制(有操作指示)

    学习html5 canvas,写了一个小练习来加深理解,可以实现图形随拖动而复制. <!DOCTYPE html> <html> <head> <meta c ...

  5. canvas压缩、裁切图片和格式转换的方法

    按照大小压缩图片,或者按照特定分辨率裁切图片,转为blob数据.自动处理ios中可能存在的照片偏差90°问题. 例如,获取300*300大小的头像,实现以下效果: 使用方式: <!-- 引入js ...

  6. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  7. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  8. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  9. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

随机推荐

  1. Oracle 组织架构(转)

    原文地址:Oracle 组织架构 我们先来看一下实际生活中的集团组织架构. 下图是一个典型的投资集团组织架构. 集团在各个国家有独立的法人. 每个法人会负责若干个业务进行,比如石油开采,汽车制造,软件 ...

  2. SignalR 实现web浏览器客户端与服务端的推送功能

    SignalR 是一个集成的客户端与服务器库,基于浏览器的客户端和基于 ASP.NET 的服务器组件可以借助它来进行双向多步对话. 换句话说,该对话可不受限制地进行单个无状态请求/响应数据交换:它将继 ...

  3. LINUX SSH显示中文乱码

    ssh登陆后,执行: export LANG=zh_CN.gb2312就可以显示中文了.编辑/etc/sysconfig/i18n 将LANG="zh_CN.UTF-8" 改为 L ...

  4. python数字图像处理(2):图像的读取、显示与保存

    skimage提供了io模块,顾名思义,这个模块是用来图片输入输出操作的.为了方便练习,也提供一个data模块,里面嵌套了一些示例图片,我们可以直接使用. 引入skimage模块可用: from sk ...

  5. 用python简单处理图片(5):图像直方图

    我们先来看两个函数reshape和flatten: 假设我们先生成一个一维数组: vec=np.arange(15) print vec 显示为: [ 0 1 2 3 4 5 6 7 8 9 10 1 ...

  6. SSM三大框架整合详细教程(Spring+SpringMVC+MyBatis)

    使用 SSM ( Spring . SpringMVC 和 Mybatis )已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没 ...

  7. 细说C#多线程那些事-线程基础

    我第一次接触“线程”的概念时,觉得它深奥难懂,看了好多本书,花了很长时间才领悟到它的真谛.现在我就以一个初学者的心态,把我所理解的“多线程”描述给大家.这一次是系列文章,比较完整的展示与线程相关的基本 ...

  8. 云计算之路-阿里云上:2014年6月12日12点IIS请求到达量突降

    今天中午12:00左右,在Windows性能监视器中突然发现SLB中的两台云服务器的IIS请求到达量(ArriveRate)突然下降,见下图: IIS日志中的情况如下: 综合以上情况,我们推测在12: ...

  9. jquery源码分析

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 前段时间上班无聊之时,研究了 ...

  10. The web application [/codeMarket] registered the JBDC driver[.........] but failed to unregister it when the web application was stopped. To prevent

    如果你报错了上面的这个严重,那么你的tomcat版本一定是在6.0.25之上的 原因:tomcat 6.025以后在sever.xml中引入了内存泄露侦测,对于垃圾回收不能处理的对像,它就会做日志. ...