组件希望补上 style props, props style样式希望支持Record<string, string>能把css变量给支持上去！

[codedart2018]

组件希望补上 style props, props style样式希望支持Record<string, string>能把css变量给支持上去！
另希望canvas能把border-radius样式给支持上去，目前外层样式有border-radius，但没有overflow.导致图片方形，前端用canvas或后端裁成圆形的都不太合适，还是用样式处理比较合理！

[cgfeel]

1. style props

建议直接通过样式覆盖，例如 .rotate-captcha.on { --captcha-canvas-opacity: .4; }

2.有演示吗，建议 fork 这个项目，把 base64 修改进行演示

https://stackblitz.com/edit/stackblitz-starters-paesfm?file=src%2Fserver%2Fimage.ts

[cgfeel]

看了下，无论是正方形的图片还是长方形的图片，都不会变形，建议验证图片最少长宽尺寸 160px
正方形验证图
https://stackblitz.com/edit/stackblitz-starters-owuelx?file=src%2Fserver%2Fimage.ts

长方形验证图
https://stackblitz.com/edit/stackblitz-starters-paesfm?file=src%2Fserver%2Fimage.ts

最后说一下，服务端给到前端的一定要是圆形，裁剪好的图片

① 不能提供角度数字；② 也不能提供方形（正方形、长方形、平行四边形）的图片

建议参考后端裁切算法进行修改：

• GD：https://github.com/cgfeel/laravel-rotate-captcha/blob/main/src/Handle/GdHandle.php
• Imagick：https://github.com/cgfeel/laravel-rotate-captcha/blob/main/src/Handle/ImagickHandle.php

---

问题举例：

这是一张旋转好的方形图片

破解它只需要将这个图片每1°++递归就好了，只要有一条边水平就计算出角度了，而计算角度不用超过 180 次（下图蓝色区域）

---

这是一张圆形的图片，无论怎么旋转得到的仍旧是原点，除非是经过真人去判断，或者通过 AI 去识别，单纯从代码逻辑方式递归角度是得不到正确结果