jQuery.photoClip头像图片上传裁剪插件免费下载

jQuery.photoClip头像图片上传裁剪插件,点击选择上传图片,支持旋转、放大、缩小图片尺寸和拖动图片操作,设置好后裁剪即可。

JS代码

<script type="text/javascript" src="js/iscroll-zoom.js"></script>  
<script type="text/javascript" src="js/hammer.js"></script>  
<script type="text/javascript" src="js/lrz.all.bundle.js"></script>  
<script type="text/javascript" src="js/jquery.photoClip.js"></script>  
<script> 
$(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(); 
         
         
}); 
 
function clip(){ 
    $("#clipArea").photoClip({ 
        size: [200, 200], 
        file: "#file", 
        ok: "#clipBtn", 
        view:"#imgcav", 
        rotaBtn:'#rotaBtn', 
        bigBtn:'#bigImg', 
        smallBtn:'#smallImg', 
        outputSize:[200, 200], 
        loadStart: function() { 
            console.log("照片读取中"); 
        }, 
        loadComplete: function() { 
            console.log("照片读取完成"); 
        }, 
        clipFinish: function(dataURL) { 
            var img = '<img src="'+dataURL+'">'; 
            $('#imgHtml').html(img); 
        } 
    }); 
} 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录