基本信息
源码名称:html5 移动端 截图功能实现 源码下载(截取图片插件)
源码大小:0.07M
文件格式:.zip
开发语言:CSS
更新时间:2015-12-21
   友情提示:(无需注册或充值,赞助后即可获取资源下载链接)

     嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300

本次赞助数额为: 2 元 
   源码介绍

<!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>demo</title>

    <link rel="stylesheet" type="text/css" href="css/default.css">
    <style>
        #clipArea {
            margin: 20px;
            height: 300px;
        }

        #file,
        #clipBtn {
            margin: 20px;
        }

        #view {
            margin: 0 auto;
            width: 200px;
            height: 200px;
        }
    </style>

</head>
<body ontouchstart="">

    <article class="zzsc-container">
        <div id="clipArea"></div>
        <input type="file" id="file">
        <button id="clipBtn">截取</button>
        <div id="view"></div>
    </article>

    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="js/iscroll-zoom.js"></script>
    <script src="js/hammer.js"></script>
    <script src="js/jquery.photoClip.js"></script>
    <script>
        //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        $("#clipArea").photoClip({
            width: 200,
            height: 200,
            file: "#file",
            view: "#view",
            ok: "#clipBtn",
            loadStart: function () {
                console.log("照片读取中");
            },
            loadComplete: function () {
                console.log("照片读取完成");
            },
            clipFinish: function (dataURL) {
                console.log(dataURL);
            }
        });
    </script>


</body>
</html>