可以这样尝试下，在拿到用户的图片数据后，创建另一个 canvas，使用 CanvasContext.rotate(number rotate)

绘制旋转90度后的图片。在获取旋转后的图片。



import { Button, Canvas } from "@tarojs/components";
import {
  canvasToTempFilePath,
  createCanvasContext,
  getFileSystemManager,
} from "@tarojs/taro";
import { useEffect } from "react";


const canvasWidth = 100;
const canvasHeight = 300;


const CanvasRotate = () => {
  useEffect(() => {
    const ctx = createCanvasContext("canvas1");
    ctx.strokeRect(10, 10, 25, 15);
    ctx.scale(2, 2);
    ctx.strokeRect(10, 10, 25, 15);
    ctx.scale(2, 2);
    ctx.strokeRect(10, 10, 25, 15);
    ctx.draw();
  }, []);
  return (
    <>
      <Canvas
        canvasId='canvas1'
        id='canvas1'
        style={{
          border: "2rpx solid #000",
          width: canvasWidth,
          height: canvasHeight,
        }}
      />
      <Canvas
        canvasId='canvas2'
        id='canvas2'
        style={{
          border: "2rpx solid red",
          width: canvasHeight,
          height: canvasWidth,
        }}
      />
      <Button
        onClick={() => {
          canvasToTempFilePath({
            canvasId: "canvas1",
            success(res) {
              const canvas2Context = createCanvasContext("canvas2");
              canvas2Context.transform(1, 0, 0, 1, 0, canvasWidth);
              canvas2Context.rotate(-(90 * Math.PI) / 180);
              canvas2Context.drawImage(
                res.tempFilePath,
                0,
                0,
                canvasWidth,
                canvasHeight
              );
              canvas2Context.draw(false, () => {
                return canvasToTempFilePath({
                  canvasId: `canvas2`,
                  success: (ress) => {
                    const base64url =
                      "data:image/png;base64," +
                      getFileSystemManager().readFileSync(
                        ress.tempFilePath,
                        "base64"
                      );
                    console.log(base64url, "base64url");
                  },
                  fail: (err) => {
                    console.log(err, "err");
                  },
                });
              });
            },
            fail: function (err) {
              console.log("fail-downloadFile", err);
            },
          });
        }}
      >
        旋转90deg
      </Button>
    </>
  );
};


export default CanvasRotate;

没搞过呢还

小程序暂时不支持动态修改横竖屏