js:
data:{
canvassize:[],
}
wx.getImageInfo({
src: tempFilePaths[j],//本地文件路径
success: (ress) => {
var tmpsize= ress;
tmpsize.height=ress.height/2;
tmpsize.width=ress.width/2;
this.setData({ canvassize: tmpsize, })
let ctx = wx.createCanvasContext(myCanvasID)
ctx.drawImage(tempFilePaths[j], 0, 0, ress.width, ress.height,0,0,tmpsize.height,tmpsize.width)
})
wxml:
<canvas canvas-id="myCanvasID" style="width:{{canvassize.width}}px;height:{{canvassize.height}}px;;" ></canvas>
canvas宽高为原始图片的一半,使用drawimage将图片绘制到canvas中时,希望将图片缩放到原始长宽的一半放入canvas
实际执行效果,加载到canvas的部分任然时原像素加载,canvas里只有原始图片的左上1/4,drawimage(imgurl,0,0,imgW,imgH,0,0,W,H)中的最后两个参数W,H不起作用
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
问题补充:
当canvas设置宽为canvasW,高为canvasH时
drawimage(imgurl,0,0,imgW,imgH,0,0,dW,dH)
官方说明 drawimage 是将图片imgurl 中宽 imgW 高imgH的部分 缩放到 宽dW 高dH 大小加载到canvas中
实际执行效果是 drawimage是将图片imgurl原像素加载canvas,并将宽canvasW 高canvasH的部分缩放到 dW dH 再加载到canvas中
问题就出现了 如果canvasW和canvasH都比图片imgurl 的imgW和imgH小,也就是原始图片大于canvas长宽,drawimage是从原图截取宽canvasW和高canvasH的部分所小到dW和dH