用canvas实现图片裁切的功能，裁切出来的图片边缘透明了！

最新推荐文章于 2024-05-28 10:04:42 发布

Miss橘子

最新推荐文章于 2024-05-28 10:04:42 发布

阅读量604

点赞数

分类专栏：代码不断，八哥不止文章标签： js canvas

本文链接：https://blog.csdn.net/ycx4567/article/details/113309392

版权

4 篇文章 0 订阅

订阅专栏

本文介绍了在使用canvas实现图片裁剪功能时遇到的图片边缘透明问题，原因是Number的toFixed(2)方法导致的精度丢失。解决方法是在调用toFixed(2)之前，将数值乘以100，然后再除以100，以确保裁剪比例的精确性，从而避免图片边缘出现不应有的透明区域。

摘要由CSDN通过智能技术生成

用canvas实现图片裁切的功能，裁切出来的图片边缘透明了！

一顿操作之后发现是tofixed(2)的精度缺失问题；

tofixed(2)是Number的原型方法，四舍五入之后保留两位小数

解决方法：

1.在tofixed(2)之前先乘个100

const redrawRatio_width = (imgWidth / finalWidth * 100).toFixed(2) / 100
const redrawRatio_height = (imgHeight / finalHeight * 100).toFixed(2) / 100

关注

专栏目录