使用canvas在前端压缩图片实例页面
    
     
        
      
            
       
效果（400x400限制）：
            
       
                
        
                    
         
                    
         
                
        
            
       
        
      
    
     
    

效果图（canvas压缩图片会失真）：

参考：

php canvas 前端JS压缩，获取图片二进制流数据并上传

https://www.cnblogs.com/-mrl/p/8708114.html

js+php如何实现上传图片

https://www.jianshu.com/p/b7f5a706d7da

千万级流量H5应用涉及到的技能点-2:附件上传以及云存储

http://www.imwinlion.com/archives/49

HTML5 file API加canvas实现图片前端JS压缩并上传

http://www.zhangxinxu.com/wordpress/2017/07/html5-canvas-image-compress-upload/