<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no, email=no" /> <title>支持移动设备触摸手势的jQuery图片裁剪</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/default.css"> <style> #clipArea { margin: 20px; height: 300px; } #file, #clipBtn { margin: 20px; } #file { margin-left: 50%; transform: translateX(-50%); } #clipBtn { border: 0; background: #2a2020; color: white; } #view { margin: 0 auto; width: 200px; height: 200px; } </style> </head> <body> <div id="clipArea"></div> <input type="file" id="file"> <button id="clipBtn">截取</button> <div id="view"></div> <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <script> window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>') </script> <script src="js/iscroll-zoom.js"></script> <script src="js/hammer.js"></script> <script src="js/jquery.photoClip.js"></script> <script> $("#clipArea").photoClip({ 200, height: 200, file: "#file", view: "#view", ok: "#clipBtn", }); </script> </body> </html>