canvas旋转图片

最近写小程序遇到一个需求，需要旋转图片再上传到服务器，就想到了用canvas来实现。

描述

<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

在原生写法里，
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

在小程序里，微信提供了新的接口：

CanvasContext
canvas 组件的绘图上下文。

<!--使用ctx来唤起接口-->
const ctx = wx.createCanvasContext('Canvas')

实现图片旋转

1、第一步，先实现用canvas绘制图片

在小程序内用canvas绘制图片挺容易实现，先调用chooseImage接口，获取图片本地路径，然后用drawImage将图片绘制出来

let that = this;
wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function(res) {
        let height,width;
        <!--存本地路径-->
        that.path = res.tempFilePaths[0]
        //获取图片信息，获取图片的宽高，也可省略这一步
        wx.getImageInfo({
            src: res.tempFilePaths[0],
            success: res2 => {
                width= res2.width;
                height= res2.height;
                let tempFilePaths = res.tempFilePaths
                let canvas = wx.createCanvasContext('canvas');
                canvas.drawImage(tempFilePaths[0], 0, 0, 250, 250);
                //绘制图片
                canvas.draw();
            }
        })
    },
    fail: function() {
    }
})

效果如下：

 

图片绘制.png

2、实现旋转

图片旋转的接口是rotate，但是我尝试里一下 ，没找到旋转的规律。我要旋转90度，在画布上直接不见了。

查看文档，文档里写着：以原点为中心，原点可以用 translate() 方法修改，顺时针旋转当前坐标轴。

原点默认是画布的左上角

先尝试45度角旋转，将旋转角度改为45°

<!--点击旋转按钮的方法：-->
imgRotate(path) {
    <!--path我在选取图片的时候已经存了-->
    var canvas = wx.createContext();
    canvas.rotate(45 * Math.PI / 180);
    canvas.drawImage(path, 0, 0, 250, 250);
    wx.drawCanvas({
        canvasId: 'canvas',
        actions: canvas.getActions()
    })
}

效果如下：

 

旋转45°.png

如果旋转90°，估计是旋到画布外面去了。

3、实现90度旋转

怎样才能将我们旋转的东西显示到画布上呢，这里要用到translate了，translate可以改变操作原点，我先将原点移到画布上方的中心点试试（操作原点就是画面的左上角）

<!--点击旋转按钮的方法：-->
imgRotate(path) {
    var canvas = wx.createContext();
    <!--添加一个translate（translate和rotate务必要在绘制前写）-->
    canvas.translate(125, 0);
    canvas.rotate(45 * Math.PI / 180);
    canvas.drawImage(path, 0, 0, 250, 250);
    wx.drawCanvas({
        canvasId: 'canvas',
        actions: canvas.getActions()
    })
} 

实现效果：

 

旋转45°.png

现在，旋转规律一目了然了，按照原点进行旋转，我们只需操作原点移动就可以了。如果要实现90°旋转，就要将原点移动到右上角的位置，才不会超出画布。

<!--点击旋转按钮的方法：-->
imgRotate(path) {
    var canvas = wx.createContext();
    canvas.translate(250, 0);
    canvas.rotate(90 * Math.PI / 180);
    canvas.drawImage(path, 0, 0, 250, 250);
    wx.drawCanvas({
        canvasId: 'canvas',
        actions: canvas.getActions()
    })
}

实现效果：

 

旋转90°.png

 

现在大功告成了，如果要旋转180°，可以将操作原点移到右下角，即（250,250）的位置；我的画布大小为500rpx，可以根据自己的画布大小，找坐标位置。

现在我要做的是将canvas图片再转成文件地址，然后穿个服务器端，微信提供了将canvas转为本地路径的接口，将转换方法写在刚刚的旋转方法里。

4、上传图片到服务端

<!--点击旋转按钮的方法：-->
imgRotate(path) {
    var canvas = wx.createContext();
    canvas.translate(250, 0);
    canvas.rotate(90 * Math.PI / 180);
    canvas.drawImage(path, 0, 0, 250, 250);
    wx.drawCanvas({
        canvasId: 'canvas',
        actions: canvas.getActions()
    })
    //绘制完成后回调，第一个参数是是否清空上一次绘画结果，第二个参数是回调函数
    canvas.draw(false, wx.canvasToTempFilePath({
        canvasId: 'canvas',
        success: function (res) {
            var tempFilePath = res.tempFilePath;
            console.log(tempFilePath)
            <!--在这里可以进行 wx.uploadFile()操作，将图片传到服务端-->
        },
        fail: function (res) {
            console.log(res);
        }
    }));
    
}

---

我在旋转时遇到一个难点，要是图片的宽高不是一致的，那怎么处理？

现在我将canvas宽高调整为，600*400

绘制图片.png

如果我旋转90°，宽高完全变了

imgRotate(path) {
    var canvas = wx.createContext();
    canvas.translate(300, 0);
    canvas.rotate(90 * Math.PI / 180);
    canvas.drawImage(path, 0, 0, 300, 200);
    wx.drawCanvas({
        canvasId: 'canvas',
        actions: canvas.getActions()
    })
    //绘制图片
    canvas.draw(false, wx.canvasToTempFilePath({
        canvasId: 'canvas',
        success: function (res) {
            var tempFilePath = res.tempFilePath;
            console.log(tempFilePath);
        },
        fail: function (res) {
            console.log(res);
        }
    }));
}

效果图：

 

旋转90°.png

底部有一部分超出画布了，要不我就改变成这个画布的宽高，可是有个缺点，图片会变形

imgRotate(path) {
    var canvas = wx.createContext();
    canvas.translate(300, 0);
    canvas.rotate(90 * Math.PI / 180);
    canvas.drawImage(path, 0, 0, 200, 300);
    wx.drawCanvas({
        canvasId: 'canvas',
        actions: canvas.getActions()
    })
    //绘制图片
    canvas.draw(false, wx.canvasToTempFilePath({
        canvasId: 'canvas',
        success: function (res) {
            var tempFilePath = res.tempFilePath;
            console.log(tempFilePath);
        },
        fail: function (res) {
            console.log(res);
        }
    }));
}

切记：绘制时的宽高是在旋转前的宽高

    canvas.drawImage(path, 0, 0, 200, 300);

效果图：

 

旋转90°.png

以上，canvas实现图片旋转就完成了