主要用到以下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. java - Socket简单编程实践

    1.简介: 1)SOCKET是应用程序和网络之间的一个接口.SOCKET创建设置好以后,应用程序可以: 通过网络把数据发送到socket . 通过网络从socket接收数据.(通信的前提是应用程序知道 ...

  2. 对CSRF的理解及防范

    对CSRF的理解: 假定a是一个银行网站, b是一个危险网站. 当用户在访问a, 并且session并未结束的情况下, 去访问b网站, b网站就可以通过隐藏的url或者是表单来伪造用户对a的get或者 ...

  3. iQuery stop()

    jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法 $ ...

  4. Java设计模式—装饰模式

    装饰模式是一种比较常见的模式. 定义为:动态的给一个对象添加一些额外的职责.就增加功能来说,装饰模式比生成子类更加灵活. 装饰模式的通用类图如下: 装饰模式的构成: 1) 抽象构件(Component ...

  5. PHP snippets

    Friendly file size string public static function bytesToSize($bytes) { if ($bytes < 1024) { retur ...

  6. 您H1B身份的申请或H1B延期的申请提交对地方了吗?

    由于H1B配额的短缺,任何关于移民局对H1B申请的改动对马上要申请H1B的外国学生或专业人士来说都很重要.美国移民局在2007年3月5号发布了关于更改接收H1B身份申请或H1B延期申请的新政策. 申请 ...

  7. IOS enum(枚举)使用

    typedef enum { MJMessageTypeMe=, MJMessageTypeOther }MJMessageType; /** *信息的类型 * */ @property (nonat ...

  8. appuim操作webview控件

    1.操作webview控件,在uiautomator中如下图,能定位的只有最外层的内容.就一个webview控件,查找不到里面内容 1.使用driver.getContext(),获取是否是webvi ...

  9. Spark运行命令示例

    local单机模式:结果xshell可见:./bin/spark-submit --class org.apache.spark.examples.SparkPi --master local[1] ...

  10. 【BZOJ4698】[SDOI2008] Sandy的卡片(后缀数组+二分)

    点此看题面 大致题意: 给你\(N\)个序列,若定义两个相同子串为一个子串内所有数加上一个数后能变成另一个串,求所有序列中的最长相同子串的长度. 简单的转化 首先,我们对题目进行一个简单的转化. 要求 ...