Javascript 旋转后，画布背景为黑色的PNG图像

嗨，我想用下面的代码旋转我的PNG：

async function rotateImage(imageBase64, rotation) {
        var img = new Image();
        img.src = imageBase64;
        return new Promise(resolve => {
            img.onload = () => {
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                canvas.width = img.width;
                canvas.height = img.height;

                ctx.fillStyle = "rgba(255,255,255,.6)";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.save();

                ctx.translate(canvas.width / 2, canvas.height / 2)
                ctx.rotate(rotation * (Math.PI / 180));

                ctx.drawImage(img, -img.width / 2, -img.height / 2);

                ctx.restore();
                resolve(canvas.toDataURL("image/jpeg"))
            };
        })

这是我旋转前的图像： 这是我旋转后的图像： 旋转后的图像背景角是黑色的，如何透明？ 注意：我用这个PNG作为谷歌地图的标记。 我读了以下帖子：

---

谢谢你的帮助。

我认为这一行就是问题所在

ctx.fillStyle=“rgba（255255255.6）”

，如果删除此行背景为黑色，并且如果将其设置为

ctx.fillStyle=“transparent”

或

ctx.fillStyle=“rgba（255255255,0）”，则使用灰色填充画布。

？则将图像转换为JPEG编码的url。JPEG格式不包括透明度（alpha通道）。如果要保留alpha，请使用canvas.toDataURL（“image/png”）channel@Blindman67是的，非常感谢，我根本没有注意到这一点，谢谢