基于HTML5+JS实现本地图片裁剪并上传功能-创新互联

最近做了一个项目，这个项目中需要实现的一个功能是：用户自定义头像（用户在本地选择一张图片，在本地将图片裁剪成满足系统要求尺寸的大小）。这个功能的需求是：头像最初剪切为一个正方形。如果选择的图片小于规定的头像要求尺寸，那么这整张图片都会作为头像。如果大于规定的尺寸，那么用户可以选择要裁剪的区域。用户点击确定按钮，就将裁剪得到的图片数据发送到服务器，在后端将图片数据保存成一个文件。

要完成上述功能，涉及到的知识有：ajax，canvas和html5中的files接口。我将实现这个功能的代码封装到了4个模块中，分别是ajax.js，preview.js，shear.js和customerImg.js。

ajax.js:用于发送ajax请求。

preview.js:用于图片预览

shear.js：用于裁剪图片

customer.js:自定义头像。在这个模块中药引入ajax.js，preview.js和shear.js

我使用webpack进行打包。我还使用了jquery和jquery-ui。

我从这个项目中抽离出了这个功能。下面是这个功能的详细代码。

1.HTML代码

  

   
   选择图片
  
  

   

    

     

     
    
   

   

    
预览
    
    

     确定
    
   
  
 

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。