主要用到以下JS文件:

<script src="js/photo/iscroll-zoom.js"></script>

<script src="js/photo/hammer.js"></script>

<script src="js/photo/lrz.all.bundle.js"></script>

<script src="js/photo/jquery.photoClip.js"></script>

记得在页面加载完成后初始化插件:

var clipArea = new bjj.PhotoClip("#clickArea", {

size: [254, 246], //编辑区域的宽高

outputSize: [254, 246], //编辑完成后输出的图片尺寸

outputType: "png",

file: "#file", //input框的ID

view: "#view", //编辑区域

ok: "#clickBtn", //剪切按钮

loadStart: function() {

console.log("照片读取中");

},

loadComplete: function() {

console.log("照片读取完成");

},

loadError:function(event){

alert("照片读取失败");

console.log(event);

},

clipFinish: function(dataURL) {

console.log(dataURL);

}

注意:

clickArea、clickBtn、view、file四个要在同一个页面上。

Github地址:https://github.com/baijunjie/jQuery-photoClip

JQ剪辑图片插件,适用于移动端和PC端的更多相关文章

  1. C# 移动端与PC端的数据交互

    小记:针对目前功能越来越强大的智能手机来说,在PC端支持对手机中的用户数据作同步.备份以及恢复等保护措施的应用已经急需完善.不仅要对数据作保护,而且用户更希望自己的手机跟PC能够一体化,以及和远程服务 ...

  2. iis 如何搭建url 重定向,实现无线端和pc端不同的跳转

    第一步,下载安装ARR(Application Request Routing), http://www.iis.net/downloads/microsoft/application-request ...

  3. 前端:移动端和PC端的区别

    在阿里的几次面试中,总是被问到移动端和PC端有什么区别,当时回答的时候主要是回答了在兼容性.网速.适配.页面布局等方面的不同,但是还是很不系统,所以这里做一个总结. 第一: PC考虑的是浏览器的兼容性 ...

  4. 简述移动端与PC端的区别

    1.移动端与PC端的区别 PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更 ...

  5. JS 判断移动端与PC端

    js判断移动端与pc端   这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...

  6. JavaScript判断移动端及pc端访问不同的网站

    JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...

  7. js判断游览器是移动端还是PC端

    js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...

  8. 检测当前运行环境——移动端与PC端。

    方法1: $(function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app ...

  9. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

随机推荐

  1. WPF自定义分页控件,样式自定义,简单易用

    WPF自定义分页控件 做了许久伸手党,终于有机会贡献一波,搜索一下WPF分页控件,还是多,但是不太通用,主要就是样式问题,这个WPF很好解决,还有一个就是分页控件嘛,只关心几个数字的变动就行了,把页码 ...

  2. python之其他模块的用法

    1.时间模块   在Python中通常有三种表示时间的方式,分别是时间戳.元组.格式化的时间字符串. 时间模块的常用方法 time.sleep() #指定延迟时间 time.time() #当前时间的 ...

  3. vue安装及环境搭建

    vue项目在pycharm里运行需要安装一个插件,打开settings,找到plugins,里面搜索vue.js,点击安装. vue安装 先安装node.js npm install -g @vue/ ...

  4. vim常用命令大全

    在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起的下面n行.你可以试试把代码缩进任意打乱再用n==排版,相当于一般IDE里的code format.使 ...

  5. ps使用

    1.图片剪裁 1.按快捷键M(矩形选择工具)-> 选中要扣出的图片(按shift可正方形)->按快捷键C(剪裁工具)->双击鼠标选中区域,剪裁成功. 2.选中psd中的图标 1.按快 ...

  6. css钻石旋转实现

    css钻石旋转实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  7. mui的ajax例子1

    mui.ajax()方法,get请求 前端页面: <!DOCTYPE html><html><head> <meta charset="utf-8& ...

  8. cms-帖子静态化

    实现帖子静态化和实现友情链接静态化一致, 1.首先建立帖子类别的实体类: package com.open1111.entity; /** * 帖子类别实体 * @author user * */pu ...

  9. JIRA Plugin Development——Configurable Custom Field Plugin

    关于JIRA Plugin开发的中文资料相当少,这可能还是由于JIRA Plugin开发在国内比较小众的原因吧,下面介绍下自己的一个JIRA Plugin开发的详细过程. 业务需求 创建JIRA IS ...

  10. World Wind Java开发之十一——加载热点信息(仿Google Earth)(转)

    在GE的图层中有一个照片图层,在浏览时可以看到各地的一些图片,我们称之为热点信息,如下图所示: 再来看下本文的实现效果: 效果是不是很像呢,其实实现这个很简单,参照examples中的Balloons ...