jQuery-頭像上傳裁切旋轉放大程式碼

程式碼片段：

$(function(){
var html = '<div class="boxCen">';
html += '<div id="clipArea" class="file-clip"></div>';
html += '<div class="file">';
        html += '<div class="file-btn">點選上傳圖片</div>';
        html += '<input type="file" class="service-file" id="file">';
        html += '</div>';
html += '<div class="file-btn" id="clipBtn">裁切圖片</div>';
html += '<div class="file-btn" id="rotaBtn">選轉</div>';
html += '<div class="file-btn" id="bigImg" >放大</div>';
html += '<div class="file-btn" id="smallImg">縮小</div>';
html += '<div class="red">（滑鼠滾輪為縮放，每次雙擊則順時針旋轉90度）</div>';
html += '</div>';
html += '<div id="imgHtml" class="clipEnd"></div>';
$('#tt').html(html);
clip();