canvas绘制的图片保存的时候有点模糊
收藏
回答
| 框架类型 | 问题类型 | API/组件名称 | 终端类型 | 操作系统 | 微信版本 | 基础库版本 |
|---|---|---|---|---|---|---|
| 小程序 | Bug | canvasToTempFilePath | 微信iOS客户端 | 1.02.1803210 | 1.9.91 |
5 个回答
请 登录 后发表内容
相关问题
相关文档
- wx.canvasToTempFilePath: 小程序/开发/API/画布/wx.canvasToTempFilePath
- wx.canvasToTempFilePath#参数: 小程序/开发/API/画布/wx.canvasToTempFilePath
- wx.canvasToTempFilePath#功能描述: 小程序/开发/API/画布/wx.canvasToTempFilePath
- wx.canvasToTempFilePath#示例代码: 小程序/开发/API/画布/wx.canvasToTempFilePath
- wx.saveImageToPhotosAlbum: 小程序/开发/API/媒体/图片/wx.saveImageToPhotosAlbum
麻烦提供一下出现问题的机型和微信版本，并且给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题
是所有的机型都是这样 版本是最新的 代码片段，这个跟代码片段有什么关系。
draw_canvas:function(e){
var ctx = wx.createCanvasContext('firstCanvas')
ctx.setFillStyle('#fff')
ctx.rect(0, 0, width, height)
ctx.setFillStyle('#f9f9f9')
ctx.fill()
var code = 1140 / 939
var code_width = width - 40
// ctx.drawImage(that.data.acti_logo, img_left, img_cut, width, 250, 0, 0, width, 200)
ctx.drawImage('../img/canvas.png', 20, white_back, code_width, code_width * code)
ctx.drawImage('../img/biaoqian.png', 20, biaoqian)
ctx.fillStyle = "#333";
ctx.setFontSize(18)
ctx.fillText(user_name, 40, name_height);
ctx.fillStyle = "#f66925";
ctx.setFontSize(12)
ctx.fillText('邀请你一起来参加这个活动', 40, inte_height);
ctx.drawImage(that.data.poster, code_text + 10, poster_height, poster_width, poster_width)
ctx.fillStyle = "#000";
ctx.setFontSize(14)
ctx.fillText('长按识别二维码查看', code_text, code_height);
ctx.fillStyle = "#fff";
ctx.setFontSize(14)
ctx.fillText('活动信息', 30, biaoqian_text)
ctx.fillStyle = "#000";
ctx.setFontSize(15)
ctx.fillText(activity.title, 50, ac_name);
ctx.fillText(activity.address, 50, ac_address);
ctx.fillText(activity.start_time + '——' + activity.end_time, 50, ac_time);
ctx.draw()
}
// 保存图片
totemp: function (e) {
var that = this
var width = this.data.width
var height = this.data.height
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: width,
height: height,
destWidth: width,
destHeight: height,
canvasId: 'firstCanvas',
success: function (res) {
// console.log(res)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res => {
console.log(res)
that.setData({
share: false,
close: false,
Preservation: false
})
},
fail: res => {
// console.log(res)
},
complete: res => {
// console.log(res)
}
})
}
})
},
一直是模糊的，我们是先放大四倍再用 scale 缩小到原尺寸解决
怎么放大？canvas绘制的怎么放大缩小，是在保存图片的时候去做这个操作吗？
微信的canvas尺寸是不对应屏幕的宽高的，自定义缩放是不对的，应该基于systeminfo()中的pixelRatio值做处理
直接在画图，尺寸定大点不就好了， 然后
wx.canvasToTempFilePath({width:900,height:1600,destWidth:900,destHeight:1600,canvasId:'shareCanvas',success:function(a) {h.setData({hiddenCanvas: !0,imagePath: a.tempFilePath})wx.hideLoading()},complete:function(a) {wx.hideLoading()}})直接用image组件展示出来，下载的时候用canvas下载
destWidth和destHeight都乘2或者乘3
注意DPI ratio，不能随便缩放的
之前是在工具上显示模糊，但是真机的话可以显示清晰
同楼上 放大再缩小