我有一个用户可以上传照片的页面。上传后，他们可以在画布中移动它们，它们可以裁剪画布上的图像。
要裁剪它，我会获得相对于画布的图像坐标，并将其转换为toDataURL。
在移动设备上，我在CSS中使用zoom来缩放整个画布以适合视口。我不能以另一种方式做到这一点，因为除了用户的照片之外，其他元素和各种文本都无法按比例缩放以适合每种分辨率。
问题在于，在移动设备上裁剪时，位置并不完全是用户选择的位置，显然是因为zoom属性。
这是一个模拟移动问题的小提琴https://jsfiddle.net/g6e16xza/。
我尝试使用ctx.scale()来匹配css zoom，但没有任何运气。
最后，我需要结果图像始终是固定尺寸（500px×325px），无论用户是从桌面还是移动设备上传。
非常感谢任何建议。
谢谢