收藏
回答

canvas 生成图片 模糊

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 相关 客户端 7.0.3 2.5.2

根据手机屏幕宽度设定canvas的宽度

根据9:16的比例设置高度

绘画出图像

保存图片

尺寸(不知道这么设置对不对)

    destWidth等于canvas宽度

    destHeight等于canvas高度

    width等于canvas宽度

    height等于canvas高度

保存后的图片非常模糊,由于上面绘制小程序码   根本就扫不出来

    不知道如何设置不模糊

    

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

6 个回答

  • 禾店短剧系统
    禾店短剧系统
    2021-06-11

     toBeCanvas() {

                var copyDom = $("#canvasQR");

                var width = copyDom.offsetWidth; //dom宽

                var height = copyDom.offsetHeight; //dom高

                var scale = 2; //放大倍数

                html2canvas(this.$refs['order'], {

                    dpi: window.devicePixelRatio * 2,

                    scale: scale,

                    width: width,

                    heigth: height,

                }).then(canvas => {

                    const context = canvas.getContext('2d');

                    // 【重要】关闭抗锯齿

                    context.mozImageSmoothingEnabled = false;

                    context.webkitImageSmoothingEnabled = false;

                    context.msImageSmoothingEnabled = false;

                    context.imageSmoothingEnabled = false;

                    var url = canvas.toDataURL();

     

                    var triggerDownload = $("<a>").attr("href", url).attr("download", "详情.png").appendTo("body");

                    triggerDownload[0].click();

                    triggerDownload.remove();

                });

            },

    2021-06-11
    有用 1
    回复
  • 逆光·暖阳
    逆光·暖阳
    2019-06-11

    wx.canvasToTempFilePath({

         width:that.data.canvasWidth,

         height: that.data.canvasHeight,

         destWidth: that.data.canvasWidth*that.data.pixelRatio,

         destHeight: that.data.canvasHeight * that.data.pixelRatio,

        ...


    实测模糊


    2019-06-11
    有用 1
    回复
  • 奈何
    奈何
    2021-02-23

    获取玩像素比也设置了,还是有些模糊


    2021-02-23
    有用
    回复
  • 杉杉爱吃鱼🐳
    杉杉爱吃鱼🐳
    2019-02-27

    请问这个问题解决了么?我使用canvas绘制出来的 海报 ,海报上的文字绘制出来有锯齿。

    2019-02-27
    有用
    回复 6
    • 杉杉爱吃鱼🐳
      杉杉爱吃鱼🐳
      2019-02-27

      怎样才能清晰的显示呢?

      2019-02-27
      回复
    • 2019-02-27

      解决了   用生成图片的宽高分别乘以设备像素比

      用他获取像素比  wx.getSystemInfo

      2019-02-27
      回复
    • 杉杉爱吃鱼🐳
      杉杉爱吃鱼🐳
      2019-02-27回复

      是这

       destWidth等于canvas宽度

          destHeight等于canvas高度

          width等于canvas宽度

          height等于canvas高度


      四个属性值分别乘以 

      wx.getSystemInfo中 pixelRatio 的像素比输出图片么?

      还有一个问题是 canvas 的大小我按照wx.getImageInfo()中获取的宽高去绘制可以么


      2019-02-27
      回复
    • 杉杉爱吃鱼🐳
      杉杉爱吃鱼🐳
      2019-02-27回复杉杉爱吃鱼🐳

      试了好多种方法 ,绘制出来的图片上的文字都有锯齿


      2019-02-27
      回复
    • 2019-02-27回复杉杉爱吃鱼🐳


      2019-02-27
      回复
    查看更多(1)
  • 2019-02-15

    是不是用canvas宽度*设备像素比

    2019-02-15
    有用
    回复
  • 2019-02-15

    应该是受手机的 dpr 的影响,如手机 dpr 是 2 的话,canvas 的宽度应该是手机屏幕宽度的两倍才不会模糊

    2019-02-15
    有用
    回复 2
    • 2019-02-15

      那用户手机上显示呢


      2019-02-15
      回复
    • 2019-02-15回复

      可以用这个接口获得 dpr


      2019-02-15
      2
      回复
登录 后发表内容