stuart-cardmaker
/
index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="telephone=no" name="format-detection" />
  <title>自制拜年贺卡</title>
  <link rel="stylesheet" href="css/card.css"></head>
<body>
  <img class="shareimg" src="images/share.jpg" alt="" />
  <div class="mask"></div>
  <div class="wrapper">
    <input type="hidden" name="base64" id="base64" />
    <!--上传-->
    <div class="upform">
        <div class="uploadbox">
          <img src="images/blank.gif" class="blank" alt="">
          <input id="image_uploader" name="pic" class="fileupload-new" type="file" />
        </div>
    </div>

    <!--图片编辑-->
    <div class="cardwrapper hide" id="createbox">
      <div class="cardbox">
        <img src="" id="preview" alt="">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="cards/c1.png" id="theme" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="cards/c2.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="cards/c3.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="cards/1.png" id="theme" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="cards/2.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="cards/3.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="cards/4.png" id="theme" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="cards/5.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="cards/6.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="btbt create" onclick="Card.previewCard();">合成</div>
    </div>

    <!--合成预览-->
    <div class="imgbox hide">
      <div class="imgtitle">合成中...</div>
      <div class="sharetipbox">分享给好友，邀他们一起制作贺卡吧</div>
      <div class="cardresult">
        <img id="cardresult" src="http://tpl-thumb.qiniudn.com/no.gif" alt="" />
      </div>
    </div>

    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/postcard.js" type="text/javascript"></script>
    <script src="js/card.js" type="text/javascript"></script>
    <script src="js/up.js"></script>
    <script src="js/swiper.js"></script>
    <script>
    $("#upc").delegate("#image_uploader", "click", function() {
      Card.showLoading();
    });
    $(function() {
      //选择图片预览
        $('#image_uploader').makeThumb({
            width: 400,
            height: 400,
            success: function(dataURL, tSize, file, sSize, fEvt) {
                Card.hideLoading();
                $("#base64").val(dataURL);
                $("#preview").attr("src", dataURL).css({
                  "height":$(window).height()
                });
                Card.postImg();
            }
        });
        Card.fixBox();
    });
  </script>
  </div>
  <div id="shadow" class="maskboxer">
    <img src="images/loading.gif" />
  </div>
  <div class="maskboxer orientation-tips">
    <span>亲，竖屏操作体验更好哦</span>
  </div>
</body>
</html>