前言
canvas是微信小程序中最常用的组件之一,可以实现图片裁剪、压缩等多种功能。但是实现这些功能的前提之一是用canvas绘制图片,但是由于微信官方的辣鸡文档,总是要有坑需要踩,其中最常见的就是使用drawImage这个API绘制图片时经常出现的图片缩放问题。
解决思路
首先给定一个canvas宽度 (假定为窗口宽度),然后根据所要绘制的图片计算出图片的高宽比,再使用窗口高度(除去导航栏,状态栏剩下的部分)乘以图片高宽比得到画布高度,计算公式如下:
c
a
n
v
a
s
_
w
i
d
t
h
=
w
i
n
d
o
w
_
w
i
d
t
h
c
a
n
v
a
s
_
h
e
i
g
h
t
=
w
i
n
d
o
w
_
h
e
i
g
h
t
∗
i
m
a
g
e
_
h
e
i
g
h
t
i
m
a
g
e
_
w
i
d
t
h
canvas\_width=window\_width \\ canvas\_height=window\_height * \frac{image\_height}{image\_width}
canvas_width=window_widthcanvas_height=window_height∗image_widthimage_height
代码实现
|