收藏
回答

用canvas画布背景图画出来是黑色的,这是为什么?

 createNewImg(){

    var that = this;

    const query = wx.createSelectorQuery()

    var canvas = query.select('#mycanvas')

    query.select('#mycanvas')

    .fields({ node: true, size: true })

    .exec((res) => {

      const canvas = res[0].node

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

      const imaUpload = canvas.createImage()

      console.log()

      imaUpload.src ='https://www.linkedsign.cn/Photo/Beauty/ChamberOfCommerce/20210907/yqh.png'

      // console.log(1)

      imaUpload.onload = function (){

     

        context.drawImage(imaUpload, 0, 0, 345, 550)

        console.log(context)

        const dpr = wx.getSystemInfoSync().pixelRatio

        canvas.width = res[0].width * dpr

        canvas.height = res[0].height * dpr

          // console.log(res[0].width)

        context.scale(dpr, dpr)

        context.fillRect(0, 0, 100, 100)

        context.save();

  

        var titl = that.data.Title;

     

        context.fillStyle='#191919';

        context.textAlign='left';

        context.font = 'normal bold 18px sans-serif';

        context.fillText('嘻嘻哈哈', 60, 270);

        context.stroke();

        context.save();

  

  

        // context.draw(true)

        wx.canvasToTempFilePath({

          canvasId:'mycanvas',

          // quality:'jpg',

          canvas:canvas,

          success:res=>{

            console.log(res)

            that.setData({

              imageUrl:res.tempFilePath

            })

          }

        })

      }

      

     

    })

    

  }


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

2 个回答

  • 微盟
    微盟
    2021-09-07
    canvas.toDataURL("image/png");
    

    格式 image/[图片格式]

    png默认生成图片无背景;

    jpeg默认生成图片为黑色背景;

    如果需要白色背景,可以:

    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    


    2021-09-07
    有用 1
    回复
  • 神经蛙
    神经蛙
    2021-09-07

    canvas设置的背景色和css设置的背景色要保持一致

    2021-09-07
    有用
    回复 2
    • Thorn_qx
      Thorn_qx
      2021-09-07
      我没有背景色  是一张底图来的
      2021-09-07
      回复
    • 神经蛙
      神经蛙
      2021-09-07回复Thorn_qx
      必须要设置,不然就是黑色
      2021-09-07
      回复
登录 后发表内容