Mini Program canvas drawImage stepped on the hole when loading network pictures.

my problem has been solved. Sharing my problems by asking questions here may be of some help to you!

scene description

  • I want to dynamically generate a picture (including user profile picture and mini program code) with canvas on my page, then let the user save the picture to the album, and then share the picture to the moments, as shown below

  • canvas drawImage api
  • downloadFile getImageInfo api

  • canvas
  • :
  • canvascanvas , downloadFile downloadFile url https://wx.qlogo.cn
  • found the reason. It"s not the pot of canvas, it"s the problem of caching downloadFile
  • solution: configure https://wx.qlogo.cn into a secure domain name to ok
has been messing around for a long time, but I didn"t expect it to be such a problem. Friends who encounter this problem can refer to
.
Mar.31,2021

Hello, I still can't draw locally using downloadFile or getImageInfo.
well, I found the problem myself, and then the problem of the landlord did not appear in version 2.0.8. Maybe Tencent added the whitelist itself, that link, download does not draw on Synchronize, and pointing to the problem is that everyone's network pictures can not be drawn. I borrow the place where the landlord borrows the place to put a code to draw a network picture. Thank you.

drawPage: function () {
    var that = this; // context.draw(true, that.getTempFilePath);
    
    var context = wx.createCanvasContext('share');
    var avatar = this.data.avatar;
    this.setData({
      canvasSwitcher: true
    })
    wx.downloadFile({
      url: avatar,
      success: function (res) {
        if(res.tempFilePath) {
          context.drawImage(res.tempFilePath, 150, 260, 30, 30);
          context.draw(true, that.getTempFilePath);
        }
      }
    })
    var images = '../images/Bitmap.png';
    context.setFillStyle('-sharpf2f2f2');
    context.drawImage(images, 10, 10, 295, 250);
    console.log(avatar)
    context.setFontSize(20);
    context.setFillStyle("-sharp666");
    context.fillText('232', 230, 380);
    context.fillText('', 200, 400);
    context.fill();
    context.draw(true, this.getTempFilePath);
  },

getTempFilePath:function(){
    console.log(121221)
    wx.canvasToTempFilePath({
      canvasId: 'share',
      success: (res) => {
        this.setData({
          shareTempFilePath: res.tempFilePath
        })
      }
    })
  },

it should take time to download pictures on the Internet, so if you don't want to wait on Synchronize, please write true in the first parameter of another draw

.

Today, I revised it again. After I went online, I found that the picture could not be saved. I really wanted to add the avatar download address to the whitelist and was cheated.


above is your answer


can you share the source code?


excuse me: "configure https://wx.qlogo.cn into a secure domain name to ok. How to configure this?


Hello, I use canvas to draw Wechat's profile picture. It takes getImageInfo about 3 seconds to get url. Is it the same with yours?

  • Mini Program uses canvas to generate pictures

    use canvas to generate pictures in Mini Program. There are layouts such as text in the pictures, which are similar to the QR code pictures in Alipay. Does Mini Program have a similar library? ...

    Mar.12,2021
  • Canvas drawing Catton

    The problem is that canvas users draw graphics when they touchstart touchmove. Because I call the drawing method in touchmove, now there will be a little stutter when I come across a phone with poor performance. Is there any good solution? What I m thi...

    Mar.30,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3e948-2c409.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3e948-2c409.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?