JQ剪辑图片插件,适用于移动端和PC端
主要用到以下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端的更多相关文章
- C# 移动端与PC端的数据交互
小记:针对目前功能越来越强大的智能手机来说,在PC端支持对手机中的用户数据作同步.备份以及恢复等保护措施的应用已经急需完善.不仅要对数据作保护,而且用户更希望自己的手机跟PC能够一体化,以及和远程服务 ...
- iis 如何搭建url 重定向,实现无线端和pc端不同的跳转
第一步,下载安装ARR(Application Request Routing), http://www.iis.net/downloads/microsoft/application-request ...
- 前端:移动端和PC端的区别
在阿里的几次面试中,总是被问到移动端和PC端有什么区别,当时回答的时候主要是回答了在兼容性.网速.适配.页面布局等方面的不同,但是还是很不系统,所以这里做一个总结. 第一: PC考虑的是浏览器的兼容性 ...
- 简述移动端与PC端的区别
1.移动端与PC端的区别 PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更 ...
- JS 判断移动端与PC端
js判断移动端与pc端 这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...
- JavaScript判断移动端及pc端访问不同的网站
JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...
- js判断游览器是移动端还是PC端
js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...
- 检测当前运行环境——移动端与PC端。
方法1: $(function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app ...
- 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...
随机推荐
- iOS开发ReactiveCocoa学习笔记(一)
学习 RAC 我们首先要了解 RAC 都有哪些类 RACSignal RACSubject RACSequence RACMulticastConnection RACCommand 在学习的时候写了 ...
- How to Install Apache Solr 4.5 on CentOS 6.4
By Shay Anderson on October 2013 Knowledge Base / Linux / How to Install Apache Solr 4.5 on Cent ...
- NGSL + NAWL 单词表 以及学习网站
https://quizlet.com/44769538/nawl-1-1-50-flash-cards/ NAWL 网站 NAWL 单词表 + NGSL 单词表 http://www.newgen ...
- $.ajax防止多次点击重复提交的方法
第一种:使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法:$.ajaxPrefilter()方 ...
- 异步加载js的3种方式
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...
- 【MATLAB】设定坐标的轴的范围
set(gca,'XLim',[0 1.5]);%X轴的数据显示范围set(gca,'XTick',[0:0.1:1.5]);%设置要显示坐标刻度set(gca,'XTickLabel',[0:0.1 ...
- Linux最常用命令实战
1.改变机器的名称: vim /etc/hostname Master 在文件中修改机器名称为我们想要的名称(相当于域名) 可以通过shutdown -h now 关闭 2.查看当前机器IP: ifc ...
- 【硬盘整理】使用UltimateDefrag将常用文件放置在磁盘最外圈
使用方法未知.软件截图如下: 官方网站(英文):http://www.disktrix.com/ 汉化破解版V3.0下载地址:http://page2.dfpan.com/fs/7com9monca3 ...
- 基于PowerShell的Lync Server管理 使用C# 之 Telephony 功能 查看 /修改
本以为这个属性可以在用户信息中直接反应出来,但是看了好几遍还是没找到这个属性名称 这个功能没有在get-User 的结果中直接反映出来 但是可以通过 Property 查找单个选项 如: Get-Cs ...
- java Vamei快速教程14 异常处理
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 程序很难做到完美,不免有各种各样的异常.比如程序本身有bug,比如程序打印时打印机 ...