小程序
小游戏
企业微信
微信支付
扫描小程序码分享
wx.compressImage 在开发工具的模拟器中此函数运行正常图片大小能正常压缩,
然而在真机中只是成功反回了成功却没有对图片做任何压缩处理。
下面是手机系统
运用上面的代码其他平台原本3M的图片能被压缩早1M以内,在当前系统下依然是3M 却走了success 回调。
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
目前我们的解决方案如下,还是期待官方解决此问题
// 读取是否是需要压缩,如果是判断是否是鸿蒙系统; if(deviceInfo.platform == 'ohos'){ if(deviceInfo.system.includes("OpenHarmonyOS")){ // 鸿蒙系统 压缩放到Canvas 中进行处理 let imgData = res.tempFiles[0]; imgData['isCanvas'] = true; resolve(imgData); return;
// 创建组件CanvasImgTool Component({ /** * 组件的属性列表 */ properties: { max_w_h: { type: Number, value: 700, }, }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { // 传入图片路径返回压缩后的图片 async compressImage(imagePath){ const that = this; return await new Promise((resolve, reject) => { wx.getImageInfo({ src: imagePath, success:async(res)=>{ let response = that.drawImageToCanvas(res.path,res.width,res.height); resolve(response); }, fail: (err) => { reject(err); } }); }); }, // 绘制图片到canvas async drawImageToCanvas(imagePath,imgW,imgH) { const that = this const query = this.createSelectorQuery() return await new Promise((resolve, reject) => { query.select('#img_tool_canvas') .fields({ node: true, size: true}) .exec((res) => { if (!res[0]) { console.error('Canvas element not found'); return; } const canvas = res[0].node const ctx = canvas.getContext('2d') canvas.width = imgW; canvas.height = imgH; // 创建图片对象 const image = canvas.createImage() image.onload = async () => { // 清除画布 ctx.clearRect(0, 0, imgW, imgH) const x = 0; const y = 0; ctx.drawImage(image, x, y, imgW, imgH) let res = await that.canvasGetImage(imgW,imgH); resolve(res); } image.src = imagePath; }) }); }, // 获取canvas图片 返回图片路径 async canvasGetImage(imgW,imgH) { const query = this.createSelectorQuery() let max_w_h = this.properties.max_w_h; let isHor = imgW >imgH ?true:false; let w = isHor?max_w_h:max_w_h * imgW / imgH ; let h = isHor?max_w_h * imgH / imgW :max_w_h; return await new Promise((resolve, reject) => { query.select('#img_tool_canvas') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node wx.canvasToTempFilePath({ x: 0, y: 0, destWidth: w, destHeight: h, quality:0.4, fileType:'png', canvas: canvas, success(res) { resolve(res.tempFilePath); }, fail(err) { reject(err); console.error('保存失败:', err) } }) }) }); } } })
wxml
<view class="canvas-box" style="width: 500px; height: 500px;">
<canvas id="img_tool_canvas" type="2d" style="width:500px; height: 500px;"></canvas> </view>
#css
.canvas-box{ position: absolute; position: fixed; top: -1000rpx; z-index: -10; left: -999999px; overflow: visible; }
写工具方便页面调用
class CompressTool { // static async compressImageTool(ctx,imagePath){ return await ctx.selectComponent('#canvasImgTool').compressImage(imagePath); } } export default CompressTool
在要使用的页面上:
<CanvasImgTool id="canvasImgTool"/>
js 文件中:
path = await CompressTool.compressImageTool(this,path);
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
本回答由AI生成,可能已过期、失效或不适用于当前情形,请谨慎参考
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
目前我们的解决方案如下,还是期待官方解决此问题
// 读取是否是需要压缩,如果是判断是否是鸿蒙系统; if(deviceInfo.platform == 'ohos'){ if(deviceInfo.system.includes("OpenHarmonyOS")){ // 鸿蒙系统 压缩放到Canvas 中进行处理 let imgData = res.tempFiles[0]; imgData['isCanvas'] = true; resolve(imgData); return;// 创建组件CanvasImgTool Component({ /** * 组件的属性列表 */ properties: { max_w_h: { type: Number, value: 700, }, }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { // 传入图片路径返回压缩后的图片 async compressImage(imagePath){ const that = this; return await new Promise((resolve, reject) => { wx.getImageInfo({ src: imagePath, success:async(res)=>{ let response = that.drawImageToCanvas(res.path,res.width,res.height); resolve(response); }, fail: (err) => { reject(err); } }); }); }, // 绘制图片到canvas async drawImageToCanvas(imagePath,imgW,imgH) { const that = this const query = this.createSelectorQuery() return await new Promise((resolve, reject) => { query.select('#img_tool_canvas') .fields({ node: true, size: true}) .exec((res) => { if (!res[0]) { console.error('Canvas element not found'); return; } const canvas = res[0].node const ctx = canvas.getContext('2d') canvas.width = imgW; canvas.height = imgH; // 创建图片对象 const image = canvas.createImage() image.onload = async () => { // 清除画布 ctx.clearRect(0, 0, imgW, imgH) const x = 0; const y = 0; ctx.drawImage(image, x, y, imgW, imgH) let res = await that.canvasGetImage(imgW,imgH); resolve(res); } image.src = imagePath; }) }); }, // 获取canvas图片 返回图片路径 async canvasGetImage(imgW,imgH) { const query = this.createSelectorQuery() let max_w_h = this.properties.max_w_h; let isHor = imgW >imgH ?true:false; let w = isHor?max_w_h:max_w_h * imgW / imgH ; let h = isHor?max_w_h * imgH / imgW :max_w_h; return await new Promise((resolve, reject) => { query.select('#img_tool_canvas') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node wx.canvasToTempFilePath({ x: 0, y: 0, destWidth: w, destHeight: h, quality:0.4, fileType:'png', canvas: canvas, success(res) { resolve(res.tempFilePath); }, fail(err) { reject(err); console.error('保存失败:', err) } }) }) }); } } })wxml
<view class="canvas-box" style="width: 500px; height: 500px;">
<canvas id="img_tool_canvas" type="2d" style="width:500px; height: 500px;"></canvas> </view>#css
.canvas-box{ position: absolute; position: fixed; top: -1000rpx; z-index: -10; left: -999999px; overflow: visible; }写工具方便页面调用
class CompressTool { // static async compressImageTool(ctx,imagePath){ return await ctx.selectComponent('#canvasImgTool').compressImage(imagePath); } } export default CompressTool在要使用的页面上:
wxml
<CanvasImgTool id="canvasImgTool"/>js 文件中:
path = await CompressTool.compressImageTool(this,path);