最近写小程序遇到一个需求，需要旋转图片再上传到服务器，就想到了用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实现图片旋转就完成了
网友评论