上传图片+浏览+裁切 Demo(无后台处理部分)
2014-04-09 12:39
405 查看
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/imgareaselect-default.css"> <buttom class="btn upload">upload</buttom> </head> <body> <input type="file" name="" id="file-upload"> <div class="img"> </div> </body> <script src="js/jquery.min.js"></script> <script src="js/jquery.imgareaselect.js"></script> <script> window.URL = window.URL || window.webkitURL; $("body").on("change", "#file-upload", function() { var file = $("#file-upload").get(0).files[0]; var img = new Image(); img.src = window.URL.createObjectURL(file); img.onload = function(e) { window.URL.revokeObjectURL(this.src); load_select(); } $(".img").append(img); }); $("body").on("click", ".upload", function() { var jq = $(".img > img"); var img = jq.attr("src"); var xPos = jq.attr("data-xpos"); var yPos = jq.attr("data-ypos"); var width = jq.attr("data-width"); var height = jq.attr("data-height"); console.log("the range of pic is"); console.log("x: %s, y: %s, w: %s, h: %s", xPos, yPos, width, height); }); function load_select() { var jq = $(".img > img"); jq.imgAreaSelect({ selectionColor: "blue", aspectRatio: "4:3", selectionOpacity: 0.2, onSelectEnd: function(img, selection) { jq.attr("data-xpos", selection.x1); jq.attr("data-ypos", selection.y1); jq.attr("data-width", selection.width); jq.attr("data-height", selection.height); } }); } </script> </html>
插件:http://odyniec.net/projects/imgareaselect/
相关文章推荐
- web uploader 框架上传图片,java后台处理
- Thinkphp3.2.3 ----后台----图片上传相应处理
- Thinkphp3.2.3 ----后台----图片上传相应处理
- Thinkphp3.2.3 ----后台----图片上传相应处理
- Thinkphp3.2.3 ----后台----图片上传相应处理
- django/js 前后台对图片上传的处理
- KindEditor的使用和上传图片的后台处理
- Thinkphp3.2.3 ----后台----图片上传相应处理
- jquery mobile上传图片完整例子(包含ios图片横向问题处理和C#后台图片压缩)
- KindEditor的使用和上传图片的后台处理
- php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子
- Android上传图片到服务器并显示(后台用Java处理)
- H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
- 后台处理批量上传图片的方法
- 关于Java后台处理android上传图片的问题
- Ajax 图片上传 和 后台处理
- dede验证码不显示,dede图集后台上传图片报错 提示红色FILEID错误的处理办法
- AjaxFileUpLoad 文件异步上传Demo(模仿官方网站,后台使用.net一般处理程序)
- 关于后台处理上传图片和显示图片的简单介绍(亲测)