html5拖拽和缩小图片的解决方案

标签: 计算机技术 | 发表时间:2012-03-13 06: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 图片上传预览

- - 博客园_首页
  前段时间做html5项目的时候,做了一个图片上传功能,并且可以直接预览,单纯的js就可以实现,很方便的.   这样做比调用后台方便多了,但是只支持html5的,html5以前是不支持的. 未来html5是主流,所以这种方法非常方便的.   几段js代码就可以来实现,而且解析速度也很快. 这种方法值得推广,以后前端也不要为这个烦恼了,还要后台用程序加载出来,那样太浪费时间了.

HTML5本地裁剪图片

- - SegmentFault 最新的文章
我们首先需要创建一个 index.html文件,里面写上一些简单的 html和 css代码:. 以上的三个 <canvas>标签都是用来处理跟图片相关的内容的,详细的处理会在后续的js代码中给出. 而 id为 show_edit 和 id为 show_pic这两个是为了图片的预览和查看最后的图片生成结果.

CSS 与 HTML5 响应式图片

- - TaoBaoUED
 随着  Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高. 如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状. 响应式图片是指: 用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.

基于HTML5的可预览多图片Ajax上传

- Lynn - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1923. 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张. 要一次上传多图,做法是借助于flash. 可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观.

html5拖拽和缩小图片的解决方案

- - Marshal's Blog
要拖拽文件到绿色区域中,然后产生这样的效果:. 这里,绿色框是图片尺寸的一半,即:绿色框长宽为512×384,图片大小为1024×768. html5对文件读取的支持. 读取到的图片是对二进制数据的base64编码,可在img标签中直接显示. 使用canvas,在其中显示img. canvas的内容通过html5支持的函数导出为base64编码的图片信息.

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拖拽图片批量ajax无刷新进度上传

- - Web前端 - ITeye博客
之前有篇文章说到HTML5的拖拽(. 这里说的拖拽图片只是弱化了拖的概念,而强化了拽的操作. 从浏览器外部拖动一个文件到浏览器中来,如:. 拖动文件到浏览器之后,就会打开浏览器支持的文件,如常用的txt、图片等,如下:. 操作如上常用文件,一般都有默认行为来处理这样的事件. 这里说的拖拽上传也是一个道理,就是要做的是从浏览器外部拖动文件到浏览器中来,并且在当前页面上传该文件.

html5实现本地图片预览功能

- - JavaScript - Web前端 - ITeye博客
1.利用FileReader进行图片本地预览.     FileReader类型实现的是一种异步文件读取机制,用来把文件读入内存,并且读取文件中的数据. 为了读取文件中的数据,FileReader提供了如下几个方法:. readAsText(file,encoding):以纯文本的形式读取文件,将读取到的文本保存在result属性中,第二个参数指定编码类型,可选.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).