//旋转图像
async RoImage(url) {
let autoRotate = this.data.autoRotate,
off = wx.createOffscreenCanvas({ type: '2d' }),
image = off.createImage();
await new Promise((resolve, reject) => {
wx.getImageInfo({
src: url, success(res) {
//image.src = url;
image.name = res.type;
//变量定义、赋值
let width = res.width,
height = res.height;
console.log('[RoImage]处理前尺寸: ' + width + ' x ' + height);
//绘制canvas 旋转图片
const $ = wx.createSelectorQuery();
$.select('#canvas').fields({ node: true, size: true }).exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
let bg = canvas.createImage();
bg.src = url;
bg.onload = () => {
if (height > width && autoRotate == '1') {//自动旋转
//旋转图片开始
console.log('旋转90度');
//画板宽高调换
canvas.width = height;
canvas.height = width;
//图片开始旋转
ctx.translate(height / 2, width / 2);//原点移动到(/2, /2)中心点
ctx.rotate(270 * Math.PI / 180);//-90度
ctx.drawImage(bg, -width / 2, -height / 2, width, height);
//图片宽高调换
let ro_w = width, ro_h = height;
width = ro_h; height = ro_w;
console.log('[RoImage]处理后尺寸: ' + width + ' x ' + height);
} else {
//画板宽高调换
canvas.width = width;
canvas.height = height;
console.log('[RoImage]跳过旋转: ' + width + ' x ' + height);
ctx.drawImage(bg, 0, 0, width, height);
}
//canvas转文件的临时路径 (本地路径)
wx.canvasToTempFilePath({
canvas, quality: 1, fileType: "jpg",
success: (res) => {
//保存图片到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
console.log(res);
}
});
console.log('[RoImage]处理完成', res.tempFilePath);
image.src = res.tempFilePath;
image.onload = resolve; // 绘制图片逻辑
}
})
}
})
}, fail(res) {
image.src = url;
console.log(res);
image.onload = reject; // 绘制图片逻辑
}
});
})
return image;
},
开发者工具:
ios真机:
解决了,在ccs中把高度height注释掉就好了:https://developers.weixin.qq.com/s/uAqt1QmH7vFL