新浦京网投站网止,澳门新浦京26999com

关闭阿里云百日千才计划

    欢迎访问澳门新浦京26999com~

  1. 加入收藏
  2. 设为主页
  3. 学校简介
北大青鸟

三分钟了解北大青鸟

×
  • 北大青鸟大数据课程
  • 北大青鸟网络工程师
  • 北大青鸟web设计专业
  • 北大青鸟PHP专业
  • 北大青鸟启蒙星课程

JavaScript实现图片在线编辑以及上传预览

责任编辑:澳门新浦京26999com来源:澳门新浦京26999comJava技术教程发布时间:2012-12-09 10:03
导读:JavaScript实现图片在线编辑以及上传预览。
需要解决的问题有:本地图片如何在上传前预览、编辑;
近发现这个功能很多是基于flash实现的,很多java script实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼容。
代码实现主要利用到jquery插件imgAreaSelect,FileReader对象(chrome和ff获取本地图片数据的接口),IE滤镜效果。
关键词:imgAreaSelect FileReaderdocument.selection.createRange() IE滤镜效果
一、实现上传前预览
1.1、页面显示
代码1-1显示的是html需要展示的web页面信息
[html] view plaincopyprint?
<!—预览图片显示区域-->
<div id=”image_area”>
<img id="biuuu"src="#" title="biuuu">
</div>
<!—图片上传区域-->
<div id =”upload_area”>
<form name = "form1"action =' /person?c=changeAtvatar' enctype = 'multipart/form-data' method = 'POST'>
<input type="file"id="picpath" name="atvatar_image">
<a href="java script:void(0);"class="button"> 上传照片</a>
<input type='text'name="path" readonly>
<div id = “submit_button”>
<a href="java script:void(0);"class='button'>确认</a>
</div>
代码1-1
为了修改input file的按钮名称,我们添加了一段代码,这个在第二节将会详细说明
[html] view plaincopyprint?
<a href="java script:void(0);" class="button">上传照片</a>
<input type='text'name="path" readonly>
1.2、实现预览在线编辑
这里我们主要使用了一个插件进行图片编辑,如果需要具体查看学习可查看网址
http://odyniec.net/projects/imgareaselect/,使用方法还是很简单方便的。
[java script] view plaincopyprint?
$('#biuuu').imgAreaSelect({
aspectRatio:'1:1', //截取比例
show:true,
resizable:true, //是否可调整大小
autoHide: false,//选择框选择完毕是否自己取消
handles:true,
key:true, //是否启用键盘,默认为false
//x1: 75, y1: 30, x2:225, y2: 180, //需要处理的区域,原始的
//x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标
keys: { arrows: 1,ctrl: 5, shift: 'resize' }, //调整像素大小
//onInit:function(img, selection) { ias.setSelection(100, 50, 250, 150, true);ias.update(); }, //设置初始函数 画出选择框
onSelectChange:preview //选框移动时触发的事件
//onSelectEnd:function(img, select){alert(select.width)} //选框结束时触发的事件
});
代码1-2//www.heatpress123.net
代码1-2主要是设置需要编辑图片的一些插件属性,具体查看插件的参量说明。
先我们需要创建一个预览小图片在img之后
[java script] view plaincopyprint?
$('<div><imgid="view" src='+atvatarUrl+' style="position: relative;"/></div>')
.css({
float: 'left',
position:'relative',
overflow:'hidden',
width: '100px',
height: '100px'
}).insertAfter('#biuuu');//把新建元素放到 #biuuu 之后
代码1-3
代码1-3是创建一个小预览图片在img之后
1.3、实现在线预览功能
[java script] view plaincopyprint?
function previewImage(file)
{
var porImg = $('#biuuu'),//先获取大图片jquery对象
viewImg = $('#view');//小图片jquery对象
//判断该浏览器是否为w3c标准,既非IE浏览器
if (file["files"] && file["files"][0])
{
//使用java script的FileReader对象来读取本地数据,并且将数据结果赋值给image
的src,具体该对象如何实现的还未深入研究
var reader = newFileReader();
reader.onload =function(evt){
porImg.attr({src :evt.target.result});
viewImg.attr({src: evt.target.result});
}
reader.readAsDataURL(file.files[0]);
}
//如果是IE浏览器,采用滤镜效果,进行显示,但特别注意的是该滤镜效果使用的对象是div
对象,并非img对象,因此我们需要将原有的img对象remove同时生成新的div对象,并且赋值
相应的class和id
else
{
//创建需要滤镜显示的div的dom对象
var ieImageDom =document.createElement("div");
var proIeImageDom =document.createElement("div");
//设置对象的css属性和原有的img对象属性相同,添加相应的id属性值
$(ieImageDom).css({
float: 'left',
position:'relative',
overflow:'hidden',
width: '100px',
height: '100px'
}).attr({"id":"view"});
$(proIeImageDom).attr({"id":"biuuu"});
//删除原有img对象,append创建div的dom对象
porImg.parent().prepend(proIeImageDom);
porImg.remove();
viewImg.parent().append(ieImageDom);
viewImg.remove();
//采用滤镜效果生成图片预览
file.select();
path =document.selection.createRange().text;
$(ieImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(e
nabled='true',sizingMethod='scale',src=\""+ path + "\")"});
Loader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});
// .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='tru
e',sizingMethod='scale',src=\""+ path + "\")";//使用滤镜效果
这样就可以实现一个图片的在线编辑以及上传在预览功能。
要注意,代码必须要使用客户端访问,例如:http://loacalhost/imgpreview/index.html
不要直接点击index.html访问

本文标题:JavaScript实现图片在线编辑以及上传预览,责任编辑:澳门新浦京26999com,来源:武汉宏鹏,于2012年12月09日10时03分发布于澳门新浦京26999com。新浦京网投站网止宏鹏鲁广校区,是北大青鸟武汉电脑学校,专业IT计算机培训,拥有软件/网络/安卓/Web前端/Java课程.北大青鸟地址:光谷广场鲁巷数码港.电话:15902769092

专业老师指导

专业老师指导

赵老师

从事IT教育培训十年有余,致力于帮助广大学子找到适合自己的专业。

培训咨询客服

培训咨询客服

陈老师

IT培训专业客服,用自己的真诚解决了无数学子的困惑。

本文地址:
文章标题:

热门课程

More+
  • 北大青鸟Java软件开发

    北大青鸟Java软件开发

  • 北大青鸟UI设计课程_零基础可学

    北大青鸟UI设计课程_零基础可学

  • 北大青鸟动漫设计_武汉设计学校

    北大青鸟动漫设计_武汉设计学校

  • 北大青鸟数字艺术_武汉电脑学校

    北大青鸟数字艺术_武汉电脑学校

在线咨询
×
在线咨询更多问题

如您有任何疑问
在线咨询随时为您解答或拨打咨询热线:15902769092

×
  • 姓 名*
  • 手 机*
  • QQ号/微信号
  • 所报学科 *
  • 其他备注
  • 温馨提示:请保持手机畅通,咨询老师将为您提供专属的一对一报名服务。