小程序中實現圖片旋轉後保存

嫌麻煩的可以直接點擊小程序代碼片段體驗，下面是代碼：

<image
    src="https://qcloudimg.tencent-cloud.cn/raw/7ff4215737d7877346c0ec6ea1514d94.jpg"
    mode="widthFix"
    style="width: 100vw;"
/>
<picker mode="selector"
    range="{{options}}"
    value="{{degree}}"
    range-key="text"
    bindchange="handleChange"
>
    <View>當前旋轉: {{degree * 90}}° ></View>
</picker>
<canvas id="myCanvas" type="2d" style="width:{{canvasStyle.width}};height:{{canvasStyle.height}}" />
<button bindtap="saveImg" type="primary">保存</button>

const app = getApp()

Page({
    data: {
        tempFilePath: '',
        canvasStyle: {width: '100vw', height: '300px'},
        options: [
        {
            text: '0°',
        },
        {
            text: '90°',
        },
        {
            text: '180°',
        },        {
            text: '270°',
        },
    ],
        degree: 0
    },
    handleChange(e) {
        this.setData({
            degree: Number(e.detail.value)
        });
        this.rotate(Number(e.detail.value * 90))
    },
    onLoad() {
        this.rotate(this.data.degree * 90);
    },
    rotate(degree) {
        console.log(degree)
        wx.createSelectorQuery()
            .select('#myCanvas') // 在 WXML 中填入的 id
            .fields({ node: true, size: true })
            .exec((res) => {
                // Canvas 對象
                const canvas = res[0].node
                // 渲染上下文
                const ctx = canvas.getContext('2d')
                // 圖片對象
                const image = canvas.createImage()
                const transformCtx = (degree, width, height) => {
                    switch(degree) {
                        case Math.PI/2: {
                            ctx.translate(height, 0);
                            ctx.rotate(degree);
                            return {width:height, height:width};
                        } 
                        case Math.PI: {
                            ctx.translate(width, height);
                            ctx.rotate(degree);
                            return {width, height};
                        } 
                        case 3 * Math.PI/2: {
                            ctx.translate(0, width);
                            ctx.rotate(degree);
                            return {width:height, height:width};
                        } 
                        default: {
                            return {width: height}
                        } 
                    }
                }
                // 圖片加載完成回調
                image.onload = () => {
                    // 將圖片繪製到 canvas 上
                    console.log(image.width, image.height);
                    // 初始化畫布大小
                    const dpr = wx.getWindowInfo().pixelRatio
                    if (degree === 90 || degree === 270) {
                        canvas.width = image.height
                        canvas.height = image.width
                    } else {
                        canvas.width = image.width
                        canvas.height = image.height
                    }
                    // canvas css 的長寬比和 canvas 的長寬比保持一致，防止圖片被拉伸
                    this.setData({
                        canvasStyle: {
                            width: `${canvas.width/dpr}px`,
                            height: `${canvas.height/dpr}px`,
                        }
                    })

                    ctx.clearRect(0,0,canvas.width,canvas.height)
                    ctx.scale(dpr, dpr)
                    const {imgWidth, imgHeight } = transformCtx(degree * Math.PI / 180, image.width/dpr, image.height/dpr)
                    ctx.drawImage(image, 0, 0, image.width/dpr, image.height/dpr);
                    wx.canvasToTempFilePath({
                        x: 0,
                        y:0,
                        width: imgWidth,
                        height: imgHeight,
                        canvas,
                        fileType: 'jpg',
                        success: ({tempFilePath}) =>{
                            this.setData({tempFilePath});
                            console.log(tempFilePath);
                        }
                    })
                }
                // 設置圖片src
                image.src = 'https://qcloudimg.tencent-cloud.cn/raw/7ff4215737d7877346c0ec6ea1514d94.jpg'
            })
    },
    saveImg() {
        wx.saveImageToPhotosAlbum({
            filePath: this.data.tempFilePath,
            success(res) {
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 1000,
              })
            },
        });
    }
})