借助canvas生成的图片模糊不清
发布于 5 年前 作者 chentao 9824 次浏览 来自 问答
  • 调用此接口通过canvas生成保存到手机相册的图片不如以前的清晰

- js代码

onLoad: function(options) {
   var ctx = wx.createCanvasContext("canvas", this)
   wx.chooseImage({
     success: function(res) {
       console.log(res)
       var path = res.tempFilePaths[0]
       ctx.drawImage(path, 0, 0, 375, 667)
       ctx.draw(true, function(res) {
         wx.canvasToTempFilePath({
           canvasId: 'canvas',
           width:375,
           height:667,
           destWidth: 375*4,
           destHeight: 667*4,
           success(res) {
             console.log(res.tempFilePath)
             wx.saveImageToPhotosAlbum({
               filePath: res.tempFilePath,
               success(res) {
                 console.log(res)
                 wx.showToast({
                   title: '保存成功',
                 })
                 wx.vibrateLong({})
               }
             })
           }
         })
       })
     }
   })
 }

-wxml代码

<canvas style='width:375px;height:667px;' canvas-id="canvas"></canvas>

图片可能在电脑上区别不明显，但是在手机上一眼就能看出来

-原图：

-生成的图片

3 回复

解决了么，我这destWidth基于比例放大也没用

画两倍的图

width:750,

height:1334,

destWidth:750,

destHeight:1334,

可以基于pixelRatio比例放大后再绘制

回到顶部