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

Mini-Program canvas

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?

Previous: StaticInjectorError (AppModule) [LoginComponent-> QuoteService]

Next: How does the kindEditor Rich text Editor limit the size of uploaded files?

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? ...

Mini-Program canvas

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...

Mini-Program canvas html5

Mar.30,2021