收藏
回答

canvans转图片,不清晰且文字错位,这个是怎么回事,该怎么解决呢

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

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


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


saveImgToPhotosAlbumTap(e) { //保存

var obj = e.currentTarget.dataset.obj;

var that = this;

var unit = that.data.screenWidth / 375

//2. canvas绘制文字和图片

const ctx = wx.createCanvasContext('share');

var bgImgPath = that.data.shareImgSrc;

var head_pic = obj.cert_picture

// that.setData({

//   canvasHidden: false

// })


//这里很重要,主要就是布局

ctx.drawImage(bgImgPath, 0, 0, that.data.screenWidth, 500);

if (head_pic) {

//宽度/100  1个百分比宽度多少 * 占的比例

let x = that.data.windowWidth / 100 * 44 //160

ctx.drawImage(head_pic, x, 203, 50, 80);

}

ctx.setFontSize(10)

ctx.setFillStyle('#000')

ctx.fillText(obj.student_name, that.data.windowWidth / 100 * 22.13, 427) //83/427

ctx.fillText(obj.student_position, that.data.windowWidth / 100 * 49.06, 427); //184

ctx.fillText(obj.park_name, that.data.windowWidth / 100 * 73.33, 427); //275


ctx.fillText(obj.train_name, that.data.windowWidth / 100 * 24, 450); //90

ctx.fillText(obj.score, that.data.windowWidth / 100 * 25.33, 474); //95

ctx.fillText(obj.number, that.data.windowWidth / 100 * 21.33, 495); //80

ctx.fillText(obj.created_at, that.data.windowWidth / 100 * 14.13, 535); //53

ctx.stroke()

ctx.draw(false, function() {

// 3. canvas画布转成图片

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: that.data.screenWidth,

height: that.data.windowHeight,

destWidth: that.data.screenWidth,

destHeight: that.data.windowHeight,

canvasId: 'share',

success: function(res) {

that.setData({

shareImgSrc: res.tempFilePath

})

if (!res.tempFilePath) {

wx.showModal({

title: '提示',

content: '图片绘制中,请稍后重试',

showCancel: false

})

}

//将图片保存到相册


wx.saveImageToPhotosAlbum({

filePath: that.data.shareImgSrc,

success(res) {

wx.showModal({

title: '提示',

content: '确定要保存这张图片吗?',

showCancel: false,

confirmText: '确定',

success: function(res) {

if (res.confirm) {

console.log('用户点击确定');

}

that.setData({

canvasHidden: true

})

}

})

}

})

},

fail: function(res) {

console.log(res)

}

})

});

},


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

1 个回答

  • Albert Einstein [官]
    Albert Einstein [官]
    2018-11-30

    有无出问题的示例图片和 canvas 截图效果?

    2018-11-30
    赞同
    回复