tmpl += '<li data-id="'+i+'" ><canvas class="animated bounceIn" id="cvs_'+i+'" style="width:' + picWidth + 'px;height:' + picWidth + 'px;padding-left:' + p + 'px;padding-top:' + padding+ 'px"></canvas></li>';把style放在canvas里，不放在li里可以实现缩略图。

我前面也在思考这样的问题，只要考虑性能以后你就知道为什么不用同样的照片了。如果一开始加载的也是大图，那会很消耗流量而且速度慢。另，如果要解决你的问题，并且使用canvas，可先缩放正常图片的高（宽）度为canvas高（宽）度的100%，然后进行绘制（这样能保证一个大致的比例，图片不会过于拉伸或变形，如果宽高都是100%就会出现这种问题。）。个人建议最好以canvas的高度为基准，这样一来大部分的图都能绘制完全。以宽度100%，高度自动的情况下，特别长的图片填充不满高度。

以下是个简单的参照宽度与高度例子，你可以在codepen上试试。

以高度为参照：

div{width;200px;height:200px;overflow:hidden}
div img{height:100%;width:auto;}

以宽度为参照：

div{width;300px;height:300px;overflow:hidden}
div img{height:auto;width:100%;}

本人也才学不久，希望以上答案对你有帮助，说的不对的地方，还望多多包涵。