HTML5 Canvas显示本地图片实例1、Canvas预览图片实例1
1.前台代码:
<input id="fileOne" type="file" />
<canvas id="canvasOne" class="myCanvas" width="500" height="500"></canvas>
<script >
//读取本地文件
var inputOne = document.getElementById('fileOne');
inputOne.onchange = function () {
//1.获取选中的文件列表
var fileList = inputOne.files;
var file = fileList[0];
//读取文件内容
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
//将结果显示到canvas
showCanvas(reader.result);
}
}
//指定图片内容显示
function showCanvas(dataUrl) {
console.info(dataUrl);
var canvas = document.getElementById('canvasOne');
var ctx = canvas.getContext('2d');
//加载图片
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = dataUrl;
// document.body.appendChild(img);
}
</script>
HTML5 Canvas显示本地图片实例1、Canvas预览图片实例1的更多相关文章
- JQuery获取图片大小并控制图片文件上传大小以及上图片文件时如何预览图片
首先我们来看效果图: 点击上传之后如下: 在这里我获取到文件的大小,并且如果超出我设定的大小,则禁止上传! 不多说,上代码:先看div布局: <div class="imageCont ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- 本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- 基于html5的多图片上传,预览
基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09 ...
- Html5选择图片并及时预览图片
以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...
- FileUpload控件实现单按钮图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...
- Asp.net实现同页面内多图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: 此方法适合针对有后台生成的图片相关内容,例如购物网站商品展示页面中的封面图片,图片的数量由后台访问数据库,并加载到页面.这种 ...
随机推荐
- js中的apply call 操作小结(参考自网络)
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 说明: call ...
- Win7下Solr4.10.1和IK Analyzer中文分词
1.下载IK中文分词压缩包IK Analyzer 2012FF_hf1,并解压到D:\IK Analyzer 2012FF_hf1: 2.将D:\IK Analyzer 2012FF_hf1\IKAn ...
- C 简单单元测试框架
大约2年前,仿照GTEST写了个简单的C++单元测试框架. http://www.cnblogs.com/imlgc/archive/2012/02/09/2344506.html 后来用C写后台程序 ...
- 转:fopen()函数
1.2 文件的输入输出函数 键盘.显示器.打印机.磁盘驱动器等逻辑设备, 其输入输出都可以通过文件管理的方法来完成.而在编程时使用最多的要算是磁盘文件, 因此本节主要以磁盘文件为主, 详细介绍Turb ...
- rsync同步目录及同步文件
最简单的只读同步工作. 一,服务端的配置 1,安装rsync(阿里云默认已有此程序) 略 2,生成文件rsyncd.conf,内容如下: #secrets file = /etc/rsyncd.sec ...
- 一句话输出网站404页面,REFER及相关排序
cat www.log|awk '$9~/404/ {print $7"," $11}'|sort|uniq -c|sort -nr > ./www404.csv
- 用MarkDown来排版写作
Latex排版系统太复杂,MD很好用,微软开源了一套Madoko的开源在线MD编辑器,它提供了一台MD扩展,可以生成PDF(中间先生成Tex,再生成的PDF),幻灯片还有html.非常方便.写作,写p ...
- MVC通俗演义系列开篇
最近在读<世界史通俗演义>,发现这本书非常好,比从小上大的历史书好的多.读的开心之余,也不敢跟别人说,怕被说成“通俗”.这跟英文的技术类文章很像.英文中的IT类文章几乎是通俗形象 ...
- Vim--写在开始
这是Vim的学习记录,结合Vim使用技巧一书.
- 将 Web 应用性能提高十倍的10条建议
提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长:全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料).这个时刻在线的超连接世界意味着用户对其的期望值也处于历史上 ...