jquery html5本地头像图片裁剪上传特效[附完整实例下载和在线演示]收藏

文章标签: 图片特效
  • :
  • 04-26 17:48
  • :
  • 25次
  • :
  • 0条
  • 1赞

简介本文站长和大家分享一个jquery+html5做的一个本地图片裁剪上传的特效,一般常用来做各大网站的修改头像图片功能。l

这是站长在网上找到的一个jquery特效实例,那个网站需要注册,还要积分,站长费了番功夫,下载了下来,在这里直接分享给大家。

本文和你分享的是一个jquery+html5开发制作的本地图片裁剪上传的特效,各大网站或论坛的修改头像图片里用的就是这个特效,下面是在线实例演示地址:

jquery html5本地头像裁剪上传特效在线演示

站长把完整的代码放在百度云里,无密码,大家可以直接下载:

链接: https://pan.baidu.com/s/1Q191O_nvoCmoptukF5jCUg 密码: h72h

下面来看这个实例的核心代码,站长因为不暂时用不到这个特效,所以没有深入去研究,-_-!

<script type="text/javascript">
$('#avatarInput').on('change', function(e) {		
    var filemaxsize = 1024 * 5;//5M		
    var target = $(e.target);		
    var Size = target[0].files[0].size / 1024;		
    if(Size > filemaxsize) {			
        alert('图片过大,请重新选择!');			
        $(".avatar-wrapper").childre().remove;			
        return false;		
    }		
    if(!this.files[0].type.match(/image.*/)) {			
        alert('请选择正确的图片!')		
    } else {			
        var filename = document.querySelector("#avatar-name");			
        var texts = document.querySelector("#avatarInput").value;			
        var teststr = texts; //你这里的路径写错了			
        testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的			
        filename.innerHTML = testend;		
    }		
});	
$(".avatar-save").on("click", function() {		
    var img_lg = document.getElementById('imageHead');		// 截图小的显示框内的内容		
    html2canvas(img_lg, {			
        allowTaint: true,			
        taintTest: false,			
        onrendered: function(canvas) {				
            canvas.id = "mycanvas";				//生成base64图片数据				
            var dataUrl = canvas.toDataURL("image/jpeg");				
            var newImg = document.createElement("img");				
            newImg.src = dataUrl;				
            imagesAjax(dataUrl)			
        }		
    });	
})		
function imagesAjax(src) {		
    var data = {};		
    data.img = src;		
    data.jid = $('#jid').val();		
    $.ajax({			
        url: "后台上传页面.php",			
        data: data,			
        type: "POST",			
        dataType: 'json',			
        success: function(re) {				
            if(re.status == '1') {					
                $('.user_pic img').attr('src',src );				
            }			
        }		
    });	
}
</script>


您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-16 16:55:05