【分享】js无刷新上传图片及在线切割
做博客的时候要用到上传图片后裁剪,找了个flash的,无奈ff,ie8运行不了,只能自己动手,丰衣足食。
csdn上传资源后原来要审核,我还以为怎么看不到,害我多上传了一个,不知道怎么删除掉。= =#
选择图片后,自动上传图片,并切换到切割页面。可以在图片范围内任意切割。在ie,ff测试良好,其他浏览器木有测试。
目前只做了右下角的拉伸,其他角大家可以自行扩展
//在setattribute.js里 var resize = new Resize(this.content,this.cut,this._layCutImg.id); resize.Set("RightDown"); //大家可以扩展resize.Set("RightUp")等,RightDown,RightUp为右上角,右下角div的id //然后在resize.js里 Set:function(funCase){ var fun; switch(funCase){ case "RightDown": fun=this.RightDownMouseDown; this._obj=id(funCase); break; case "RightUp": fun=this.RightDownMouseUp;//该方法自行添加,这里我就没在做了。 this._obj=id(funCase); break; //.... default:break; } this.omove = this.bindEvent(this,this.RightDownMouseMove); this.oup = this.bindEvent(this,this.RightDownMouseUp); this.addEvent(this._obj,"mousedown",this.bindEvent(this,fun)); },//调用 var setAttribute = new SetAttribute("content","cut","temp/"+fileUrl,width,height,{"CutHeight":"50px","CutWidth":"50px","CutLeft":"30px","CutTop":"30px", "Opacity":"50"});//CutHeight,CutWidth,CutLeft,CutTop,初始化切割层的高度,宽度,距离左边,上边的距离。//要单独运行修改背景图等参数的话可以调用setAttribute.url="xx.jpg";setAttribute.Override();