业务前提概述
往canvas添加图片的时候,图片要能够正好在canvas里面,等比缩放适应。
错误效果:
正确效果:
思路
先提前规定几个名词
- imgH 图片的高度
- imgW 图片的宽度
- targetHeight 目标容器的高度
- targetWdith 目标容器的宽度
- hScale=targetHeight /imgH (以宽为基准的缩放比例)
- wScale=targetWdith /imgW (以高为基准的缩放比例)
- scale=Math.min(hScale,wScale)
只要取以宽为基准的缩放比例
和以高为基准的缩放比例
的最小值,作为最终的缩放比例即可
然后图片的宽高就应该是imgH*scale
和 imgW*scale
扩散下
- 不仅可以是图片,也可以是div
- 目标容器可以是不同端的浏览器pc,ipad,手机等
比如说
canvas的预览图片是塞在轮番图div里面的,要在pc和手机上都能等比看到效果。
pc端
手机端