問題と解決策:
発生した問題について苦情を言ってください~
WeChat アプレットを作成するときに、wx.canvasToTempFilePath を使用して画像を圧縮してアップロードすると、Android ではすべて正常であり、開発ツールでもすべて正常ですが、iOS では正常ではありません。異常は圧縮の意味ではありません。圧縮は成功しましたが、ネットワーク リクエストを送信できませんでした。これはとんでもないことでした。すべてのリクエストの入力パラメータは SM2 によって暗号化されるため、ios 圧縮が成功した後にリクエストを開始したい場合、暗号化ステップでスタックしてしまいます。以下のリクエスト メソッドは実行できません。印刷には問題ありません。暗号化する前にパラメータを取り出しましたが、スタックしました。それ以上進めなかったので、リクエストをまったく開始しませんでした。形而上学。さらに不思議なのは、去年はiOSに問題はなくコードも触っていなかったのに、今はiOSで動かなくなってしまったということです。調査の結果、wx.canvasToTempFilePath で destWidth と destHeight の 2 つの属性が追加され、定義が成功しました。必須属性でないのは不思議です。Android ではデフォルトの属性を入力しなかったので、問題ありませんでした。最終的には、他のロジックも変更されているため、これが問題かどうかはわかりませんが、現在はすべて正常です。iOS には奇妙な問題がたくさんあり、めまいがします。
今日の圧縮コードは次のとおりです（幅が高さよりも大きい場合、画像は左に回転できます）。
wx.createCanvasContext('attendCanvasId') は廃止されたと言い続けますが、前に使用した後は変更しませんし、変更するのは面倒です。
picCompress(img, width = 600, size = 102, moreCallback) {
let that = this
let imgSize = img.tempFiles[0].size / 1024
console.log('img', img)
let path = img.tempFiles[0].path
console.log('图片大小(kb)', imgSize);
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: img.tempFilePaths[0],
success: function (imgInfo) {
console.log('获取图片信息', imgInfo)
let ctx = wx.createCanvasContext('attendCanvasId');
/**
* 压缩图片：
* 图片宽度大于 width 的时候压缩，小于的时候不操作
*/
if (imgInfo.width > width) {
var canvasWidth = width;
var canvasHeight = (width * imgInfo.height) / imgInfo.width;
//设置canvas尺寸
that.setData({
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
});
//将图片填充在canvas上
if (canvasWidth < canvasHeight) {
//顺时针旋转270度
that.setData({
canvasWidth: (width * imgInfo.height) / imgInfo.width,
canvasHeight: width,
})
console.log('宽高：',canvasWidth,canvasHeight)
ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
}else {
ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
}
// ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
ctx.draw(false, () => {
//下载canvas图片
//保存临时文件
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
fileType: 'jpg',
quality: 0.5,
/* width: 0,
height: 0, */
destWidth: that.data.canvasWidth,
destHeight: that.data.canvasHeight,
success: function (res) {
console.log(res.tempFilePath)
wx.getImageInfo({
src: res.tempFilePath,
success: function (res) {
console.log('---------------1')
console.log('压缩成功')
console.log(res)
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
let t = {
tempFilePaths:res.path, picBase64:sourcePhoto}
resolve(t)
}
});
},
fail: function (error) {
console.log(error)
}
})
}, 500)
})
} else if (imgSize > size) {
// 宽度小于width 但是大小大于size 不压尺寸压质量
var canvasWidth = imgInfo.width;
var canvasHeight = imgInfo.height;
//设置canvas尺寸
that.setData({
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
});
//将图片填充在canvas上
if (canvasWidth < canvasHeight) {
//顺时针旋转270度
that.setData({
canvasWidth: (width * imgInfo.height) / imgInfo.width,
canvasHeight: width,
})
ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
}else {
ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
}
ctx.draw(false, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
fileType: 'jpg',
quality: 0.5,
/* width: 0,
height: 0, */
destWidth: that.data.canvasWidth,
destHeight: that.data.canvasHeight,
success: function (res) {
console.log(res.tempFilePath)
wx.getImageInfo({
src: res.tempFilePath,
success: function (res) {
console.log('---------------2')
console.log('压缩成功')
console.log(res)
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
// moreCallback(res.path, sourcePhoto) tempFilePaths, picBase64
let t = {
tempFilePaths:res.path, picBase64:sourcePhoto}
resolve(t)
}
});
},
fail: function (error) {
console.log(error)
}
})
}, 500)
//下载canvas图片
});
} else {
let canvasWidth = imgInfo.width
let canvasHeight = imgInfo.height
console.log('宽高：',canvasWidth,canvasHeight)
//将图片填充在canvas上
if (canvasWidth < canvasHeight) {
//顺时针旋转270度
that.setData({
canvasWidth: (width * imgInfo.height) / imgInfo.width,
canvasHeight: width,
})
ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
}else {
ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
}
ctx.draw(false, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
fileType: 'jpg',
quality: 0.5,
/* width: 0,
height: 0, */
destWidth: that.data.canvasWidth,
destHeight: that.data.canvasHeight,
success: function (res) {
console.log(res.tempFilePath)
wx.getImageInfo({
src: res.tempFilePath,
success: function (res) {
console.log('---------------3')
console.log('压缩成功')
console.log(res)
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
// moreCallback(res.path, sourcePhoto) tempFilePaths, picBase64
let t = {
tempFilePaths:res.path, picBase64:sourcePhoto}
resolve(t)
}
});
},
fail: function (error) {
console.log(error)
}
})
}, 500)
});
}
},
fail: function (getInfoErr) {
that.data.loading.clear()
console.log(getInfoErr)
// wx.hideLoading();
wx.showToast({
title: '获取图片信息失败',
icon: 'error',
duration: 2000
});
}
})
})
},
圧縮が成功すると、イメージは直接 Base64 に変換され、Promise 結果が直接返され、操作の後にリクエストが開始されます。
let t = _this.picCompress(res, 600, 100) .then(res => {
// 请求
})
886~
私の Bilibili Space
Gitee 倉庫アドレス:すべての特殊効果のソース コード
その他の記事:
~私をフォローして、よりシンプルなクリエイティブな特殊効果をご覧ください:
テキスト スモーク効果 html+css+js
サラウンド リフレクション ローディング特殊効果 html+css
バブル フローティング背景 特殊効果 html+css
シンプルな時計の特殊効果 html+css+js
サイバーパンク スタイル ボタン html+css
模倣 NetEase Cloud 公式ウェブサイト カルーセル画像 html+css+js
水の波の読み込みアニメーション html+css
ナビゲーション バー スクロール グラデーション効果 html+css+js
本のページめくり html+css
3D 立体写真アルバム html+css
ネオン画板効果 html+css+js
メモ css 属性まとめ (1)
Sass 概要メモ
... 待って、
私のホームページに行って詳細を見てください~