在移动设备上缩放画布

时间:2016-11-16 13:02:38

标签: javascript css canvas

我有一个用户可以上传照片的页面。上传后,他们可以在画布中移动它们,它们可以裁剪画布上的图像。

要裁剪它,我会获得相对于画布的图像坐标,并将其转换为toDataURL

在移动设备上,我在CSS中使用zoom来缩放整个画布以适合视口。我不能以另一种方式做到这一点,因为除了用户的照片之外,其他元素和各种文本都无法按比例缩放以适合每种分辨率。

问题在于,在移动设备上裁剪时,位置并不完全是用户选择的位置,显然是因为zoom属性。

这是一个模拟移动问题的小提琴https://jsfiddle.net/g6e16xza/

我尝试使用ctx.scale()来匹配css zoom,但没有任何运气。

最后,我需要结果图像始终是固定尺寸(500px×325px),无论用户是从桌面还是移动设备上传。

非常感谢任何建议。

谢谢

0 个答案:

没有答案