~~~ <!-- 圖片裁剪部分 --> <script src="__PLUS__/photoClip/js/iscroll-zoom.js"></script> <script src="__PLUS__/photoClip/js/hammer.js"></script> <script src="__PLUS__/photoClip/js/jquery.photoClip.js"></script> <link href="__PLUS__/photoClip/css/style.css" rel="stylesheet"> <article class="htmleaf-container"> <div id="clipArea"></div> <div class="foot-use"> <div class="uploader blue"> <input type="button" name="file" class="button" value="打開"> <input id="file" type="file" accept="image/*" multiple /> </div> <button id="clipBtn">截取</button> </div> <div id="view"></div> </article> <script> //以下是圖片裁剪部分 var obUrl = '' var screenW=$(window).width()-20; var addpicW=$('#addpic').width(); $('#addpic').css('height',addpicW+'px'); $("#clipArea").photoClip({ width: addpicW, height: addpicW, file: "#file", view: "#view", ok: "#clipBtn", loadStart: function() { console.log("照片讀取中"); }, loadComplete: function() { console.log("照片讀取完成"); }, clipFinish: function(dataURL) { $.post("{:url('pub/baseToImg')}",{pic:dataURL},function(data){ console.log(data); }) console.log(dataURL); } }); $("#addpic").click(function(){ $(".htmleaf-container").show(); }) $("#clipBtn").click(function(){ $("#addpic").empty(); $('#addpic').append('<img src="' + imgsource + '" align="absmiddle" style=" width:100%;height:100%;">'); $(".htmleaf-container").hide(); }) //圖片裁剪部分結束 </script> ~~~