主要用到以下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. electron 集成 SQLCipher

    mac 安装 brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m ...

  2. 【踩坑】mysql LIMIT 与 ORDER BY位置问题

    今天在重做iblog项目后台时,当测试功能,发现后台报错,位置在 MyBatis 向 MySQL 取数据时的语法问题,如下: SELECT * FROM article WHERE authorID ...

  3. hibernate课程 初探单表映射2-7 hbm配置文件常用设置

    本节主要简介hbm配置文件以下内容: 1 mapping标签 2 class标签 3 id标签 1 hibbernate-mapping标签 schema 模式名称 catalog 目录名称 defa ...

  4. Python开发环境Wing IDE如何调试进程异常报告

    Wing IDE的调试器所报告的任何异常,都会在调试器以外的任何代码运行事件中展示出来. 通过使用Debug工具或者是Debug菜单中的Start / Continue继续调试过程的异常检测. Win ...

  5. C#执行异步操作的几种方式比较和总结(转发:https://www.cnblogs.com/durow/p/4826653.html)

    0x00 引言 之前写程序的时候在遇到一些比较花时间的操作例如HTTP请求时,总是会new一个Thread处理.对XxxxxAsync()之类的方法也没去了解过,倒也没遇到什么大问题.最近因为需求要求 ...

  6. 【Android开发笔记】程序崩溃异常总结

    广播注册相关(broadcastReceiver) 没有注册广播就注销广播 注册广播但未注销广播 注册广播后重复注销广播 解决办法: 添加一个布尔变量,注册广播后为true,若为true在执行注销,注 ...

  7. 中标麒麟高级服务器操作系统V6

    平台: linux 类型: 虚拟机镜像 软件包: java-1.6.0 mysql-5.1.5 python-2.6 qt3-3.3.8b basic software linux neokylin ...

  8. Java 中 Double 相关问题

    在项目当中,对于double类型数据的使用比较频繁.尤其是处理金钱相关的数据,在使用Double类型的数据时,涉及到精度,显示,四舍五入等等问题. 1.  显示问题,当double 数据 小于 0.0 ...

  9. webstorm下载激活汉化

    下载 官方下载地址:https://www.jetbrains.com/webstorm/ 激活 参考http://blog.csdn.net/it_talk/article/details/5244 ...

  10. Weka 二次开发使用心得

    Weka 二次开发使用心得 一.weka数据挖掘流程 使用weka图形界面,初步尝试了下数据的预处理.分类.关联等操作,因为weka本身就是一个开源的机器学习库,于是想自己尝试下利用weka的api进 ...