实现的业务逻辑:
将两张不同的图片(前景+背景)png叠加在canvas上,输出成一张jpg图片。
是将老的逻辑迁移到新的Canvas 2d接口上,老接口没问题,新接口怎么调试输出图片都有问题。dpr等相关各种尝试了一整天,最后定位在drawImage坐标逻辑上。
问题:
drawImage坐标系混乱:请看关键代码
ctx.fillRect(0,0,canvasRef.width, canvasRef.height) ctx.drawImage(bgImage,0,0,canvasRef.width,canvasRef.height); ctx.drawImage(fgImage,0,0,canvasRef.width,canvasRef.height);
按照常识,fillRect画出的方块应该完全被两张图所遮挡,因为尺寸一模一样。开发工具调试一切正常,见图:
iOS真机出现
实在无法理解。由于手头android机器故障,麻烦也请确认下是否有这个问题。
复现请看代码片段。具体环境请看:
我看你的代码里有动态调整canvas实例的尺寸,这种操作会导致画布变形;
正确的姿势是先掉用setData变更canvas标签的宽度,然后再获取canvas实例例变更尺寸;
另:你的代码片段有报错,图片无法下载;