wxml写入
1 2 3 | <view bindtap='uploadImg'>上传</view> <image bindtap='uploadImg' data-number="0" src="{{ uploadPic[0] }}" alt="" mode="widthFix"></image><canvas style="width: {{cw}}px; height: {{ch}}px;" canvas-id="firstCanvas"></canvas> |
JS参考
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | uploadImg(e) { let that = this; console.log(e); let index = e.currentTarget.dataset.number; let uploadFile = ''; //最后处理完，图片上传的图片地址 wx.chooseImage({ success(res) { console.log(res) const tempFilePaths = res.tempFilePaths; //获得原始图片大小 wx.getImageInfo({ src: res.tempFilePaths[0], success(res) { // console.log('获得原始图片大小',res.width) //console.log(res.height) var originWidth, originHeight; originHeight = res.height; originWidth = res.width; console.log(originWidth); //压缩比例 // 最大尺寸限制 var maxWidth = 1200, maxHeight = 600; // 目标尺寸 var targetWidth = originWidth, targetHeight = originHeight; //等比例压缩，如果宽度大于高度，则宽度优先，否则高度优先 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // 要求宽度*(原生图片比例)=新图片尺寸 targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } //尝试压缩文件，创建 canvas var ctx = wx.createCanvasContext('firstCanvas'); ctx.clearRect(0, 0, targetWidth, targetHeight); ctx.drawImage(tempFilePaths[0], 0, 0, targetWidth, targetHeight); ctx.draw(); //更新canvas大小 that.setData({ cw: targetWidth, ch: targetHeight }); //保存图片 setTimeout(function() { wx.canvasToTempFilePath({ canvasId: 'firstCanvas', success: (res) => { //写入图片数组 var uploadpic = "uploadPic[" + index + "]"; // that.setData({ [uploadpic]: res.tempFilePath }); uploadFile = res.tempFilePath; //保存到相册 // wx.saveImageToPhotosAlbum({ // filePath: res.tempFilePath, // success: (res) => { // console.log(res) // }, // fail: (err) => { // console.error(err) // } // }) wx.uploadFile({ url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址 filePath: uploadFile, name: 'file', formData: { 'user': 'test' }, success(res) { const data = res.data //do something } }) }, fail: (err) => { console.error(err) } }, this) }, 500); } }) } }) } |
后面还有一个写法 20210703
// 上传图片
async chooseImg() {
var _that = this;
const imgs = this.data.imgs;
const max_imgs_length = 1;
var oldCount = imgs.length;
const tempFilePaths = await this.$chooseImage(max_imgs_length, ['original']);
for (var i = 0; i < tempFilePaths.length; i++) {
// imgs.push(tempFilePaths[i]);
var tfp = tempFilePaths[i];
//获得原始图片大小
wx.getImageInfo({
src: tfp,
success(res) {
var originWidth, originHeight;
originHeight = res.height;
originWidth = res.width;
console.log(originWidth);
//压缩比例
// 最大尺寸限制
var maxWidth = 1200,
maxHeight = 1000;
// 目标尺寸
var targetWidth = originWidth,
targetHeight = originHeight;
//等比例压缩，如果宽度大于高度，则宽度优先，否则高度优先
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 要求宽度*(原生图片比例)=新图片尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
_that.setData({
cw: targetWidth,
ch: targetHeight
});
//尝试压缩文件，创建 canvas
var ctx = wx.createCanvasContext('ssd');
ctx.clearRect(0, 0, targetWidth, targetHeight);
ctx.drawImage(tfp, 0, 0, targetWidth, targetHeight);
ctx.draw(false, setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'ssd',
fileType:'jpg',
destWidth:targetWidth,
destHeight:targetHeight,
quality:1.0,
success: (r) => {
imgs.push(r.tempFilePath);
_that.setData({
imgs: imgs
});
_that.loadPhoto(oldCount);
},
fail: (err) => {
console.error(err)
}
}, this)
}, 500));
//保存图片
}
})
}
}
前端隱藏canvas
<view style="position:fixed;top:999999999999999999999rpx;">
<canvas id="ssd" canvas-id="ssd" style="width:{{cw}}px;height:{{ch}}px;"></canvas>
</view>
