服务器绘制图片后 小程序调用,小程序canvas-旋转图片

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

描述

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

在原生写法里，

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

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

CanvasContext

canvas 组件的绘图上下文。

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) {

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();

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)

},

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实现图片旋转就完成了