收藏
回答

canvas处理图片上传保存图片流只显示一半

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug wx.canvasToTempFilePath 工具 2.2.3 2.2.3

- 当前 Bug 的表现(可附上截图)



- 预期表现


- 复现路径


- 提供一个最简复现 Demo


js代码

wx.chooseImage({

count: 1, // 默认9

sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有

sourceType: itemIndex == 0 ? ['album'] : ['camera'],

success: (res) => {

console.log(res.tempFilePaths)

const item = new IMOperator(this).createNormalChatItem({

type: 'image',

content: res.tempFilePaths,

isMy: true,

});

that.data.chatItems.push(item);

that.setData({

chatItems: that.data.chatItems,

scrollTopVal: that.data.scrollTopVal + 999,

});

// 图片加水印功能

// var arr = that.data.fileList

// res.tempFilePaths.forEach(function(item) {

//   arr.push(item)

// })

// that.setData({

//   fileList: arr

// })

//获取图片详细信息

wx.getImageInfo({

src: res.tempFilePaths[0],

success: (ress) => {

console.log(ress)

let date = new Date();

let time = that.formartDate(date);

let ctx = wx.createCanvasContext('firstCanvas');

that.setData({

canvasHeight: ress.height,

canvasWidth: ress.width

})

//将图片src放到cancas内,宽高为图片大小

ctx.drawImage(res.tempFilePaths[0], 0, 0, ress.width, ress.height)

//将声明的时间放入canvas

ctx.setFontSize(20) //注意:设置文字大小必须放在填充文字之前,否则不生效

ctx.setFillStyle('blue')

// ctx.setGlobalAlpha(0.5)

ctx.fillText('15200000001', that.data.canvasWidth - 400, that.data.canvasHeight - 150)

ctx.fillText(time, that.data.canvasWidth - 500, that.data.canvasHeight - 100)

ctx.draw(false, function() {

wx.canvasToTempFilePath({

canvasId: 'firstCanvas',

success: (res) => {

that.setData({

canvesimgurl:res.tempFilePath

})

},

fail: (e) => {

console.log(e)

}

})

})

wx.uploadFile({

url: '、、、',

filePath: that.data.canvesimgurl,

name: 'file',

formData: {},

header: {

"Content-Type": "multipart/form-data"

},

success: function (res) {

console.log(res)

var url = res.data.url;

var data = res.data.fileId;

var imgtype = "image";

if (res.statusCode == 200) {

that.sendmessage(data, url, imgtype)

} else {

let index = parseInt(that.data.chatItems.length - 1);

that.updateViewWhenSendFailed(index)

}

console.log(res.data)

},

fail: function (res) {

console.log(res)

},

complete: function (res) {

console.log(res)

}

})

}

})

}

});

});


最后一次编辑于  2018-08-27
回答关注问题邀请回答
收藏

5 个回答

  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2018-08-27

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-08-27
    赞同
    回复 1
    • keeper
      keeper
      2018-08-27回复keeper

      开发工具机型iPhone6      版本库1.9.91

      2018-08-27
      回复
  • 月饼-7
    月饼-7
    2018-08-29

    我也是,经过我的测试发现,好像跟canvas这个控件的width和height有关,比如你设置了50px * 50px的canvas,无论图在里面铺多大(比如100*100),你只能截在canvas里能看见的那50*50的那部分,由于我们大多是从坐标(0,0)开始铺,所以一般只能截到左上角的一部分图

    2018-08-29
    赞同
    回复 2
    • 木剑温小二
      木剑温小二
      2018-08-29

      ctx.drawImage(src,0,0,50,50,0,0,100,100)

      2018-08-29
      回复
    • 月饼-7
      月饼-7
      2018-08-29回复木剑温小二

      你这是铺进去,我是说截图截出来,用wx.canvasToTempFilePath方法生成一个临时文件

      2018-08-29
      回复
  • 酒柳八念
    酒柳八念
    2018-08-28

    楼主解决了吗?我的图片也是只出现左上角一块。

    我是把canvas大小动态设置的。

    固定成100vw和100vh的时候,canvas可以正常显示。

    但是动态设置canvas大小之后,就会出现问题。

    我看你也是动态设置的大小。

    2018-08-28
    赞同
    回复 1
    • keeper
      keeper
      2018-08-29

      对,没错,动态的可以的,我那个是canvas和模板之间样式有冲突,图片流是读完整的,现在弄好了。

      2018-08-29
      回复
  • 卢霄霄
    卢霄霄
    2018-08-28


    draw是个异步操作,你在draw的callback里调用canvasToTempFilePath是对的。但是uploadFile这个方法调用的位置不对,应该放到 canvasToTempFilePath的success回调里

    2018-08-28
    赞同
    回复 2
    • keeper
      keeper
      2018-08-28

      我试过放在canvasToTempFilePath的success回调里出来的图片还是不完整的    但是调了一下canvas的top样式一半的图片会变小是怎么回事呢?


      2018-08-28
      回复
    • 卢霄霄
      卢霄霄
      2018-08-28回复keeper

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      做个代码片段出来,能更好的帮你分析原因

      2018-08-28
      回复
  • boxin
    boxin
    2018-08-27

    wx.canvasToTempFilePath()函数是异步的,要在ctx.draw(),回调中settimeout执行你要的代码防止图片丢失!

    2018-08-27
    赞同
    回复 5
    • keeper
      keeper
      2018-08-27

      你好  我就是在那个里面调的


      它出现这样的图片是什么情况啊

      2018-08-27
      回复
    • boxin
      boxin
      2018-08-27回复keeper

      wx.getImageInfo()也是异步的,因此你要把2个函数错开或者写在wx.getImageInfo()中success

      2018-08-27
      回复
    • keeper
      keeper
      2018-08-27回复boxin

      是写在success里面的   demo都能跑通,嵌进项目里图片就出问题了。。。。原模原样copy进去也不行

      2018-08-27
      回复
    • boxin
      boxin
      2018-08-27回复keeper
      ctx.draw(false, setTimeout(function() {
       
      wx.canvasToTempFilePath({
       
      canvasId: 'firstCanvas',
       
      success: (res) => {
       
      that.setData({
       
      canvesimgurl:res.tempFilePath
       
      })
       
      },
       
      fail: (e) => {
       
      console.log(e)
       
      }
       
      },200))

      这段是改成这样了吗

      2018-08-27
      回复
    • 英忠通信
      英忠通信
      11-25
      经过wx.canvasToTempFilePath、wx.saveImageToPhotosAlbum的保存结果:图片height不超过150,提交的参数(desHeight)是大于150的。请教这是什么原因?
      11-25
      回复