问题描述
出现问题
对于微信小程序，dramImage的默认图像参考在画布处理中是不完整的
导入初始项目
打开链接（原官方网站示例），浏览器唤醒微信开发工具，在打开连接之前，需要下载微信开发者工具，如果已安装，直接唤醒，如果没有，则会提示您下载它。
目的
通过修改画布的绘制过程或画布样式，可以实现完全显示和调整不同模型的目的。
Page({
data:{
ImgSrc:', // need to process picture addresses
ImgW:',//canvas width
ImgH:',// canvas height
Byclear: 1 // ratio, where the iPhon 6 - 375 pixels are set to 1 standard for adaptive conversion
},
onReady() {
var that = this
// Calculate the standard scale according to the width of the screen. Here we talk about 375 as a standard value.
wx.getSystemInfo({
success: function(res) {
let byclear = res.screenWidth / 375
that.setData({
byclear
})
},
})
},
OpenAndDraw () {// Select Pictures
var that = this
wx.chooseImage({
success: (res) => {
that.setData({
imgSrc: res.tempFilePaths[0],
res
})
}
})
},
checkwh(e) {
// Processing logic
}
})
获取所选目标图像的宽度和高度?
默认画布无法获取图像的高度。此外，applet中没有新的image（）方法。它只能通过标签组件图像间接获得。所以我们需要在wxml中插入一个隐藏的标签图像。我们设置隐藏的方法。display:none也许hidden这就是全部。小心不要。wx:if，wx:if不会触发bindload事件。
<image bindload='checkwh' mode='widthFix' hidden/>
<canvas canvas-id="canvasIn" class="canvas"></canvas>
在方法checkwh中，您可以获得图片的宽度和高度。
checkwh(e){
// Real width e.detail.width height e.detail.height
let whsrc = e.detail.height / e.detail.width
// Calculate height and width, need to deal with the image width less than the screen width when the corresponding canvas ratio
}
帆布。规模计划
dramImage通过绘图，我们可以放大和缩小画布。scale要完成绘图，请继续处理checkwh。比例缩放比例非常简单，我们只需要计算屏幕与图片的实际比例，对应减少。也就是说：375 * byclear / e.detail.width在这里，我们需要采取自适应比例，当然，对于图像宽度小于屏幕，我们不做变焦处理。
checkwh(e){
// Real width e.detail.width height e.detail.height
let whsrc = e.detail.height / e.detail.width
// Computing height and width, we need to deal with the canvas ratio when the width of the picture is larger than the width of the screen.
let res = this.data.res
let byclear = this.data.byclear
const ctx = wx.createCanvasContext('canvasIn', this);
// Scale the canvas. Note that the scales are the same, that is, the scaling ratio is the same. Guarantee consistency of aspect ratio
if (e.detail.width > 375 * byclear) ctx.scale(375 * byclear / e.detail.width, 375 * byclear / e.detail.width);
ctx.drawImage(res.tempFilePaths[0], 0, 0, e.detail.width, e.detail.height)
ctx.draw()
// Follow-up actions
}
上面我们已经完全用画布绘制了画面，但还不够。接下来，我们将设置已完全显示的画布的宽度和高度。
<canvas canvas-id="canvasIn" class="canvas" style="width:{{imgW}}rpx;height:{{imgH}}rpx;margin:0 auto;">
</canvas>
微信的自适应单位是rpx。对于iPhone 6,375px = 750rpx => 1px = 2rpx; 对于其他型号，它是成比例的。byclear然后图片小于屏幕宽度，无需处理，检查wh后续代码
因此：
checkwh(e){
// The preceding code...
this.setData({
imgW: e.detail.width > 375 ? 750 : e.detail.width * 2 / byclear,
imgH: e.detail.width > 375 ? 750 * whsrc : e.detail.height * 2 / byclear
})
}
画布缩放比例方案
缩放方案优于缩放方案，因为它不需要计算画布的大小或缩放比例，而是直接将原始图像的宽度和高度设置为画布的宽度和高度。然后，缩放用于缩放画布并直接缩放代码量。这里，比例是Picture width / 750，Note that there is no need for scaling, and the CSS style automatically calculates the style ratio.
密钥wxml代码
<canvas canvas-id="canvasIn" class="canvas" style="width:{{imgW}}rpx;height:{{imgH}}rpx;margin:0 auto;zoom:{{imgW > 750 ? 750 / imgW : 1}}"></canvas>
关键JS代码
checkwh(e){
var vhsrc = e.detail.height / e.detail.width
let res = this.data.res
let byclear = this.data.byclear
const ctx = wx.createCanvasContext('canvasIn', this);
ctx.drawImage(res.tempFilePaths[0], 0, 0, e.detail.width, e.detail.height)
ctx.draw()
this.setData({
imgW: e.detail.width * 2 / byclear,
imgH: e.detail.height * 2 / byclear
})
},
以上就是今天南京小程序开发安优网络带来的微信小程序小部件完整显示图片[画布。的drawImage]，希望上面的原创文章能够给你在后期的小程序开发过程中带来帮助。
本文地址：
http://www.njanyou.cn/web/2622.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
内容营销投资回报率：您获得的收入是什么？
下一篇：
为什么视觉层次结构对于良好的用户体验至关重要
