【jquery】使用canvas实现前端裁剪图片,并上传到服务器

这里需要用到jquery Jcrop 插件实现前端选择图片区域效果

然后使用canvas裁剪图片,并把base64位的toDataURL图片转换成blob

最后使用XMLHttpRequest上传到服务器。


预览效果:

【jquery】使用canvas实现前端裁剪图片,并上传到服务器_第1张图片

整体代码:




  

  
  
  
  
  
  图片上传


    



       
上传头像
   
       
   
   
                上传         确认    

你可能感兴趣的:(html,jquery,图片裁剪,上传图片,canvas,Jcrop)