canvas 旋转图片重新生成图片url 空白

Canvas 是HTML5提供的一种用于绘制图形的元素，它并不直接支持旋转图片并生成新的图片URL。如果你想在JavaScript中实现图片的旋转，通常需要通过以下步骤：

1. 创建一个`<canvas>`元素，并获取它的2D渲染上下文`context`.
2. 加载图片到一个`Image`对象或者`HTMLImageElement`。
3. 当图片加载完成后，将图片画布转换为`ImageData`对象，这可以让你访问每个像素的数据。
4. 使用`ImageData`的`putImageData()`方法，根据你需要的旋转角度重新绘制图像数据到新的位置。
5. 最后，你可以创建一个新的`canvas`元素，设置其宽度和高度与原图相同，然后从`toDataURL()`方法获得旋转后的图片URL。

示例代码（简化版）：

let img = new Image();
img.src = 'original_image_url';
img.onload = function() {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;

    ctx.drawImage(img, 0, 0);

    // 图片旋转的角度（单位：度）
    let rotationAngle = 45;
    let rotatedCanvas = rotateImage(canvas, rotationAngle);
    let dataUrl = rotatedCanvas.toDataURL();

    function rotateImage(c, angle) {
        let width = c.width;
        let height = c.height;
        let dx = dy = 0; // 变换中心点

        // 计算旋转后的图像尺寸和变换矩阵
        let radian = Math.PI * angle / 180;
        let cos = Math.cos(radian);
        let sin = Math.sin(radian);
        let ox = (width - width * cos + dx) * cos + dx * sin;
        let oy = (height - height * sin + dy) * sin + dy * cos;
        let matrix = `matrix(${cos},${sin},${-sin},${cos},${ox},${oy})`;

        let canvas2 = document.createElement('canvas');
        canvas2.width = width;
        canvas2.height = height;
        let ctx2 = canvas2.getContext('2d');
        ctx2.translate(width / 2, height / 2);
        ctx2.rotate(radian);
        ctx2.scale(1, -1); // 由于canvas默认Y轴向上，所以需要额外翻转
        ctx2.drawImage(c, -dx, -dy);
        ctx2.transform.apply(ctx2, matrix.split(',').map(Number));
        return canvas2;
    }
};