收藏
回答

图片大于canvas尺寸时 drawimage缩放无效?

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不起作用

回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员-灵芝
    社区技术运营专员-灵芝
    2020-08-03

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-08-03
    有用
    回复
  • 雷鸣四季
    雷鸣四季
    2020-08-03

    问题补充:

    当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


    2020-08-03
    有用
    回复
登录 后发表内容
问题标签