[图片] 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;
canvas绘制完成如何旋转图片?页面竖屏,canvas竖屏,但是用户横屏绘制(页面还是竖屏),然后我保存图片 需要给他转90°然后上传,请问怎么旋转呢?
03-14