仿照微信朋友缩略图实现

demo 




    
        
        
        
        
        
        
    
    
        

仿照微信朋友圈正方形不失真缩略图

宽图

长图

正方形

裁剪缩小后的图


整个代码逻辑都比较简单,用到Canvas drawImage方法里面的几个参数 ,getImg主要是判断 是宽图,长图,还是正方形,然后再利用Canvas 的drawImage设置坐标和宽高,最后在输出,缩略图宽高不能比的话 我们样式控制会失真,需要一定比例的裁剪,我看了一下朋友圈的缩略图就是通过裁剪比例再变成正方形实现。

需要提醒大家的事 上面的代码需要在服务器上面运行,Canvas的图片好像不允许跨域。



你可能感兴趣的:(javascript,canvas)