photoClip实现兼容手机端的图片上传裁剪封面效果代码-html代码-BFW代码库

photoClip实现兼容手机端的图片上传裁剪封面效果代码

代码语言：html

所属分类：上传

代码描述：photoClip实现兼容手机端的图片上传裁剪封面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="robots" content="all">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/iscroll-zoom-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lrz.all.bundle.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.photoClip.js"></script>

</head>

<body>
    <div class="yc-upload-wrap">
        <div class="yc-upload-box">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12" style="padding:0;">

                        <div class="ycupload-mainbox">
                            <div class="ycupload-main1" style="overflow:hidden;padding-left:25px;">
                                <span style="float:left;color:#ff5a5a;font-size:14px;line-height:60px;font-weight:900;margin-right:7px;">
                                    &middot;
                                </span>
                                <span style="float:left;color:#333;font-size:16px;line-height:60px;margin-right:28px;">
                                    上传封面
                                </span>
                            </div>
                            <div class="ycupload-line"></div>
                            <div style="height:30px;"></div>
                            <div style="min-height:1px;">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12 col-xs-12" style="padding-right:0;padding-left:36px;">
                                            <!--<a href="javascript:void(0);" class="cover-uploadBtn">
                                                <img src="img/yc_uploadimg_06.png">
                                                <div id="clipArea"></div>
                                                <input type="file" id="file">
                                                <button id="clipBtn">截取</button>
                                            </a>
                                            <div id="view"></div>-->
                                            <div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
                                                <div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">
                                                    <div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
                                                        <div id="clipArea" style="margin:10px;height: 520px;"></div>
                                                        <div class="&.........完整代码请登录后点击上方下载按钮下载查看