html5 图片上传预览
- - 博客园_首页 前段时间做html5项目的时候，做了一个图片上传功能，并且可以直接预览，单纯的js就可以实现，很方便的. 这样做比调用后台方便多了，但是只支持html5的，html5以前是不支持的. 未来html5是主流，所以这种方法非常方便的. 几段js代码就可以来实现，而且解析速度也很快. 这种方法值得推广，以后前端也不要为这个烦恼了，还要后台用程序加载出来，那样太浪费时间了.
html5拖拽和缩小图片的解决方案
标签：
计算机技术
| 发表时间：2012-03-13 14:15 | 作者：Marshal
出处：http://marshal.easymorse.com
比如说，这样的场景：
要拖拽文件到绿色区域中，然后产生这样的效果：
这里，绿色框是图片尺寸的一半，即：绿色框长宽为512×384，图片大小为1024×768。
需要用到如下技术要点：
- html5拖拽文件的支持
- html5对文件读取的支持
- 读取到的图片是对二进制数据的base64编码，可在img标签中直接显示
- 使用canvas，在其中显示img
- canvas的内容通过html5支持的函数导出为base64编码的图片信息
上面示例的代码，html：
<!DOCTYPE html>
<html>
<head>
<title>云楼书编辑器</title>
<meta charset=”UTF-8″/><script type=”text/javascript” src=’js/jquery/jquery-1.7.1.min.js’></script>
<script type=”text/javascript” src=”js/jquery-ui/jquery-ui-1.8.18.custom.min.js”></script>
<script type=”text/javascript” src=’js/underscore/underscore-min.js’></script><script type=”text/javascript” src=’js/app.js’></script>
<link rel=”stylesheet” href=”css/main.css” type=”text/css”>
<link type=”text/css” href=”js/jquery-ui/css/smoothness/jquery-ui-1.8.18.custom.css” rel=”stylesheet” />
</head>
<body>
<div class=”app”>
<div class=”workSpace”>
<div class=”toolBar”>
<button class=”toolBarItem toolBarTextItem”>文本</button>
<button class=”toolBarItem toolBarMediaItem”>媒体</button>
</div>
<div class=”editArea”>
</div>
</div>
</div>
<script>
initApp();
</script>
</body>
</html>
这里用到了jQuery，jQuery ui，但是没有用到underscore。
css代码：
@CHARSET “utf-8″;
@IMPORT url(“layout_main.css”);
body{
background: rgba(0,0,0,0.1);
margin: 0;
}.app{
margin: 0 auto;
width: 1024px;
height: 768px;
background: rgb(240, 240, 240);
}.workSpace{
background: rgba(255,255,255,1);
width: 1024px;
height: 768px;
position: absolute;
}.toolBar{
background: rgb(224, 224, 224);
width: 1024px;
height: 40px;
position: absolute;
vertical-align:middle;
}.editArea{
background: rgb(255, 255, 255);
top: 40px;
width: 1024px;
height: 728px;
position: absolute;
}.toolBarItem{
height: 34px;
margin: 3px;
}.textArea{
height: 100px;
width: 100px;
position: absolute;
background: rgb(255, 249, 178);
}.mediaArea{
height: 384px;
width: 512px;
position: absolute;
background: rgb(212, 255, 176);
}
js代码：
function initApp() {
//点击文本按钮，创建新的文本框
$(‘.toolBarTextItem’).click(function () {
var block = $(‘<div class=”ui-resizable textArea”></div>’);
block.appendTo($(‘.editArea’).first());
block.resizable().draggable();//可改变尺寸，可拖拽
});//点击媒体按钮，创建新的媒体框
$(‘.toolBarMediaItem’).click(function () {
var block = $(‘<div class=”ui-resizable mediaArea”></div>’);
block.appendTo($(‘.editArea’).first());
block.resizable().draggable();//可改变尺寸，可拖拽block.on(‘dragover drop’, function (e) {//处理文件拖拽和释放事件
e.stopPropagation();
e.preventDefault();
var b = e.target;
if (e.type == ‘drop’) {//处理文件释放
console.log(‘drop file:’ + e.type);
var files = e.originalEvent.dataTransfer.files;//获取文件列表for (var i = 0; i < files.length; i++) {
var file = files[i];
console.log(‘file:’ + file.type);
if (file.type.match(‘image.*’)) {//如果是图片文件
console.log(‘file.name:’ + file.name);
var reader = new FileReader();//创建文件读取器
reader.onload = (function (theFile) {//当读取到文件后的函数
return function (e) {
console.log(‘on load’);
var canvas=$(‘<canvas></canvas>’);//创建canvas
canvas[0].width=1024/2;
canvas[0].height=768/2;
canvas.appendTo($(b));var image = new Image();//创建图片，图片内容是拖拽文件
image.src=e.target.result;var context=canvas[0].getContext(’2d’);//图片写入canvas
context.drawImage(image,0,0,image.width*.5,image.height*.5);var newImage=new Image();//创建新图片，内容来源于canvas
newImage.src=canvas[0].toDataURL(‘image/jpeg’);
$(newImage).appendTo($(b));canvas.remove();//删除canvas
};
})(file);reader.readAsDataURL(file);
console.log(‘read file’);
}
}
}
});
});
}
经过测试，在chrome下和firefox下可以执行，safari当前版本5.1不支持FileReader，无法执行。另外Opera 11.61也不能执行，不支持文件拖拽api。
源代码可见： https://github.com/MarshalW/BookEditor/tree/v0.1
相关 [html5 图片] 推荐：
HTML5本地裁剪图片
- - SegmentFault 最新的文章我们首先需要创建一个 index.html文件，里面写上一些简单的 html和 css代码：. 以上的三个
CSS 与 HTML5 响应式图片
- - TaoBaoUED 随着 Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高. 如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在 CSS3 与 HTML5 已经着力在改变这种现状. 响应式图片是指： 用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费.
基于HTML5的可预览多图片Ajax上传
- Lynn - 张鑫旭-鑫空间-鑫生活本文地址：http://www.zhangxinxu.com/wordpress/?p=1923. 在XHTML的时代，我们使用HTML file控件上传图片一次只能上传一张. 要一次上传多图，做法是借助于flash. 可惜，使用复杂的点，比如flash文件需与页面同父文件夹，JavaScript文件大小也很可观.
Wadda：基于 HTML5 Canvas 的图片放大镜
- - 博客园_首页Wadda 是下一代图片放大技术，使用HTML5 Canvas实现图片放大镜功能. 借助 HTML5 Canvas 标签，能够自定义放大级别而不需要为每个级别定义图片，还能够设置羽化（Fading）效果. 使用非常简单，只需在img标签的title属性中设置放大图片的路径，例如：. 引入Wadda.js文件，并添加如下代码：.
将HTML5 Canvas的内容保存为图片
- - CSDN博客Web前端推荐文章主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现. HTML + JavaScript的代码很简单. 作者：jia20003 发表于2013-5-19 21:44:01 原文链接. 阅读：166 评论：0 查看评论.
html5拖拽和缩小图片的解决方案
- - Marshal's Blog要拖拽文件到绿色区域中，然后产生这样的效果：. 这里，绿色框是图片尺寸的一半，即：绿色框长宽为512×384，图片大小为1024×768. html5对文件读取的支持. 读取到的图片是对二进制数据的base64编码，可在img标签中直接显示. 使用canvas，在其中显示img. canvas的内容通过html5支持的函数导出为base64编码的图片信息.
html5拖拽图片批量ajax无刷新进度上传
- - Web前端 - ITeye博客之前有篇文章说到HTML5的拖拽（. 这里说的拖拽图片只是弱化了拖的概念，而强化了拽的操作. 从浏览器外部拖动一个文件到浏览器中来，如：. 拖动文件到浏览器之后，就会打开浏览器支持的文件，如常用的txt、图片等，如下：. 操作如上常用文件，一般都有默认行为来处理这样的事件. 这里说的拖拽上传也是一个道理，就是要做的是从浏览器外部拖动文件到浏览器中来，并且在当前页面上传该文件.
html5实现本地图片预览功能
- - JavaScript - Web前端 - ITeye博客1.利用FileReader进行图片本地预览. FileReader类型实现的是一种异步文件读取机制，用来把文件读入内存，并且读取文件中的数据. 为了读取文件中的数据，FileReader提供了如下几个方法：. readAsText(file,encoding)：以纯文本的形式读取文件，将读取到的文本保存在result属性中，第二个参数指定编码类型，可选.
HTML5 logo 发布
- Greyby - 酷壳 - CoolShell.cn2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前. 我的第一感觉，就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底. 所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）.