<!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/

上传图片+浏览+裁切 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. QSqlQueryModel的实例操作

    QSqlQueryModel类为SQL的结果集提供了一个只读的数据模型,下面我们先利用这个类进行一个最简单的操作. 我们新建Qt4 Gui Application工程,我这里工程名为queryMode ...

  2. JS与OC交互--简单使用

    直接上代码 .m文件 #import "ViewController.h" @interface ViewController () <UIWebViewDelegate&g ...

  3. ubuntu on win VS ubuntu(virtual box）VS Cygwin

    执行命令粗略估计执行时间: date --rfc-3339='ns';seq 100000000 | grep 8 | wc -w; date --rfc-3339='ns' ubuntu 14.04 ...

  4. Logstash add_field 参数应用

    使用 add_field 参数有两种需求: 1. 直接加入到 event 的 hash 顶级对象中 add_field => { "my_field_one" => & ...

  5. 并发容器之CopyOnWriteArrayList(转载)

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才会真正把内容Copy出去形成一个新的内容然后再改, ...

  6. js 简易判断一个数字是否是小数

    参考:js验证输入是否是小数 我的方法是: //check the number is decimal number function checkDecimal(number){ if(!isNaN( ...

  7. js ie8不支持项总结

    不支持filter,trim  要用jquery 的$filter,$trim 数组不能用for in 要用for 数组没有indextOf方法 不能使用关键字,如true ,default IE8 ...

  8. spark向量、矩阵类型

    先来个普通的数组: scala> var arr=Array(1.0,2,3,4) arr: Array[Double] = Array(1.0, 2.0, 3.0, 4.0) 可以将它转换成一 ...

  9. linux---基本查找命令

    基本查找命令 一.文件查找命令:find 最大特点:功能强大,可以使用文件的各种属性作为查找条件来查找文件 文件属性:文件权限.文件所有者.文件大小.修改时间.文件类型 语法:find[起始查找目录] ...

  10. arcgis中的 style和serverstyle

    转自网络,原出处不明. .style文件是用ArcMap工具导出的符号库文件 .serverStyle文件是ArcEnging可用的符号库文件 需要转换才能使用. 第一:把.style文件拷贝到D:主 ...