1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="css/imgareaselect-default.css">
  7.     <buttom class="btn upload">upload</buttom>
  8. </head>
  9. <body>
  10.     <input type="file" name="" id="file-upload">
  11.     <div class="img">
  12.  
  13.     </div>
  14. </body>
  15. <script src="js/jquery.min.js"></script>
  16. <script src="js/jquery.imgareaselect.js"></script>
  17. <script>
  18.     window.URL = window.URL || window.webkitURL;
  19.     $("body").on("change", "#file-upload", function() {
  20.         var file = $("#file-upload").get(0).files[0];
  21.         var img = new Image();
  22.         img.src = window.URL.createObjectURL(file);
  23.         img.onload = function(e) {
  24.             window.URL.revokeObjectURL(this.src);
  25.             load_select();
  26.         }
  27.         $(".img").append(img);
  28.     });
  29.     $("body").on("click", ".upload", function() {
  30.         var jq = $(".img > img");
  31.         var img = jq.attr("src");
  32.         var xPos = jq.attr("data-xpos");
  33.         var yPos = jq.attr("data-ypos");
  34.         var width = jq.attr("data-width");
  35.         var height = jq.attr("data-height");
  36.         console.log("the range of pic is");
  37.         console.log("x: %s, y: %s, w: %s, h: %s", xPos, yPos, width, height);
  38.     });
  39.     function load_select() {
  40.         var jq = $(".img > img");
  41.         jq.imgAreaSelect({
  42.             selectionColor: "blue",
  43.             aspectRatio: "4:3",
  44.             selectionOpacity: 0.2,
  45.             onSelectEnd: function(img, selection) {
  46.                 jq.attr("data-xpos", selection.x1);
  47.                 jq.attr("data-ypos", selection.y1);
  48.                 jq.attr("data-width", selection.width);
  49.                 jq.attr("data-height", selection.height);
  50.             }
  51.         });
  52.     }
  53. </script>
  54. </html>

插件：http://odyniec.net/projects/imgareaselect/

上传图片+浏览+裁切 Demo(无后台处理部分)的更多相关文章

  1. 无后台的网站 内容暂存json

    当网站无后台时,将数据暂存储为json文档,然后通过调用json文件获取数据填充前端页面 存储json格式的文件 [ { "id": 1, "cat": &qu ...

  2. 富文本编辑器上传图片需要配置js，后台代码

    富文本编辑器上传图片需要配置js,后台代码

  3. arcgisserver成功发布服务后，浏览服务，无地图显示

    软件:ArcMap10.2,ArcgisCatalog10.2 方法:ArcMap10.2添加数据库连接,成功登陆数据库后,拖拽目标图层至Map窗口,对各个图层进行符号化设置 ArcCatalog中找 ...

  4. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

  5. ArcGIS Server浏览地图服务无响应原因分析说明

    1.问题描述 从4月17号下午5时起,至18号晚9点,客户单位部分通过ArcGIS Server发布的地图服务(该部分地图服务的数据源为数据库SJZX)无法加载浏览,表现为长时间无响应.同时,通过Ar ...

  6. 2、微信小程序之弹幕的实现（无后台）

    对弹幕功能主要利用环信来实现的,读者也许对环信这个东西很陌生,请先自行了解这环信再来看这文章. 环信开发文档:http://docs.easemob.com/im/400webimintegratio ...

  7. 1、微信小程序----弹幕的实现(无后台)

    小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易.今天跟大家分享自己写的一个弹幕功能. 先来一张效果图: 我的思路是这样的,先用<switch>标签确定是否打开弹幕 ...

  8. 无后台应用 Stash Backend

    Stash Backend 是Github上的开源项目 https://github.com/gaboratorium/stash,目的在于提供一套方便使用.方便部署的后台应用.特别适合为Web前端和 ...

  9. 微信小程序-游记分享(无后台）

    游记分享 博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE2020 作业要求 https://edu.cnblogs.com/campus/zjcsxy/SE ...

随机推荐

  1. 10 Technologies That will Shape Future Education--reference

    http://dizyne.net/technologies-that-will-shape-future-education/ Technology is on the rise and with ...

  2. Google, FaceBook, Amazon 加州求职记 (转)

    http://blog.csdn.net/ithomer/article/details/8774006 http://www.myvisajobs.com 一年多前,出于显而易见的原因,下定决心肉身 ...

  3. MySQL（2）：SQL语言的分类

    SQL:Structured Query Language (结构化查询语言) 分类: 1.数据操作(管理)语言:直接对数据进行操作:(DML:Data Management Language)   ...

  4. iOS 网络编程：JSON解析

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  5. appscan 安全漏洞修复办法

    appscan 安全漏洞修复办法http://www.automationqa.com/forum.php?mod=viewthread&tid=3661&fromuid=21

  6. linux系统学习(常用命令)

    今天调休,闲来无事,研究一下linux系统. Linux常用命令: 一:文件管理 ctrl+alt:在虚拟机与windows之间切换ctrl+g:进入linux输入模式 pwd:查看当前目录 ls:列 ...

  7. nodeValue和innerHTML的比较

    <ul id="parent"> <li>1</li> <li>2</li> <li>3</li> ...

  8. MATLAB基础入门笔记

    为了参加那个电工杯,豁出去啦,时间真的很短,但是得挑战呀..对于MATLAB编程,有一些了解,MATLAB(矩阵实验室的简称)是一种专业的计算机程序,用于工程科学的矩阵数学运算,说说它的开发环境. 任 ...

  9. JavaScript高级程序设计（第三版）学习笔记8、9、10章

    第8章,BOM BOM的核心对象是window,具有双重角色,既是js访问浏览器的一个接口,又是ECMAScript规定的Global对象.因此,在全局作用域中声明的函数.变量都会变成window对象 ...

  10. HttpClient的使用

    HttpClient的使用 一.简介 HttpClient是Apache Jakarta Common下的子项目,用来提供高效的.最新的.功能丰富的支持HTTP协议的客户端编程工具包,并且它支持HTT ...