小程序
小游戏
企业微信
微信支付
扫描小程序码分享
右面是drawImage之后的效果，图片没有在canvas上完全显示。
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你没有设置画布大小哦
这是画布的展示大小，建议用定位把它挪出显示文本流然后用图片展示
这是这图片背景的大小如果是全屏就要改成上方设置的一样
效果图就这样(隐私内容不给看)
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你没有设置画布大小哦
这是画布的展示大小，建议用定位把它挪出显示文本流然后用图片展示
这是这图片背景的大小如果是全屏就要改成上方设置的一样
效果图就这样(隐私内容不给看)
if (imgDetail.width > maxWidth || imgDetail.height > maxHeight) {
if (imgDetail.width >= imgDetail.height) { // 长图或正方形
that.setData({
canvasWidth: maxWidth,
canvasHeight: Number(maxWidth / bili).toFixed(0),
});
} else { // 高图
that.setData({
canvasWidth: Number(maxHeight * bili).toFixed(0),
canvasHeight: maxHeight,
});
}
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
代码如下：
wx.getImageInfo({
src: tempFiles[0].path,
success(imgDetail) {
console.log(imgDetail, "imgDetail");
const sysInfo = wx.getSystemInfoSync();
console.log( sysInfo.pixelRatio, " sysInfo.pixelRatio");
var maxWidth = 1024 / sysInfo.pixelRatio; // 最大长度
var maxHeight = 1024 / sysInfo.pixelRatio; // 最大高度
var bili = imgDetail.width / imgDetail.height // 获取图片长高比例
if (imgDetail.width > maxWidth || imgDetail.height > maxHeight) {
if (imgDetail.width >= imgDetail.height) { // 长图或正方形
that.setData({
canvasWidth: maxWidth,
canvasHeight: Number(maxWidth / bili).toFixed(0),
});
} else { // 高图
that.setData({
canvasWidth: Number(maxHeight * bili).toFixed(0),
canvasHeight: maxHeight,
});
}
console.log("canvasWidth", that.data.canvasWidth);
console.log("canvasHeight", that.data.canvasHeight);
var ctx = wx.createCanvasContext('attendCanvasId');
ctx.drawImage(imgDetail.path, 0, 0, that.data.canvasWidth, that.data.canvasHeight);
ctx.draw(false, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
destWidth: that.data.canvasWidth,
destHeight: that.data.canvasHeight,
success(res) {
console.log(res, "success");
that.compressImg(res.tempFilePath) // 缩放成功后压缩
},
fail(res) {
console.log(res, "fail");
wx.showToast({ title: 'canvas缩放失败', icon: 'none' });
}
});
}, 200);
});
} else { // 无需进行缩放，直接掉起压缩方法
that.data.canvasWidth = imgDetail.width
that.data.canvasHeight = imgDetail.height
that.compressImg(imgDetail.path)
}
}
})
},
调用这个方法，图片没有等比缩放，然后画在画布
请求一下，等比缩放图片，这个api调用哪个？