主要用到以下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. .net 向新页面跳转的语句

    1. href='##' onclick=\"window.open('../DataSplit/DrugInfo_ManualVersionViewNew.aspx?id=" + ...

  2. AngularJS(九):路由

    本文也同步发表在我的公众号“我的天空” AngularJS路由 AngularJS路由可以让我们通过不同的URL访问不同页面(似乎是废话),其价值主要体现在单页面的web应用中(single page ...

  3. JVM(二):垃圾回收

    三个问题: 那些内存需要回收? -- 对象是否存活判断 什么时候回收?   --垃圾回收触发条件 如何回收? --垃圾回收算法 垃圾回收应用  -- 理解GC日志.使用垃圾回收命令和工具 1.  判断 ...

  4. 【web】movie review——静态页面训练、css训练

    实现样式要求: image: banner.png: generaloverview.png: background.png: bannerbackground.png: rottenbig.png: ...

  5. linux 命令——56 ss(转)

    ss是Socket Statistics的缩写.顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信 ...

  6. linux 命令——37 date (转)

    在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的工作带来诸多方便. 1.命令格式: date [参数 ...

  7. IOS 监听键盘的通知(NSNotificationCenter)

    通知方法: /** * 当键盘改变了frame(位置和尺寸)的时候调用 */ - (void)keyboardWillChangeFrame:(NSNotification *)note { // 设 ...

  8. 无效的 JSON 基元 解决办法

    在AJAX中进行如下修改: 加入: dataType: "json", 移除: contentType: 'application/json', 然后检查参数名称,类型是否符合后台 ...

  9. 传入指定字段名称就可以排序的EF写法

    private static IQueryable<T> SetQueryableOrder<T>(this IQueryable<T> query, string ...

  10. World Wind Java开发之十——AnalyticSurface栅格渲染(转)

    http://blog.csdn.net/giser_whu/article/details/43017881 1.AnalyticSurfaceDemo ArcGIS下对栅格的各种分级渲染效果是非常 ...