html52.com
我爱小程序-开发者交流社区

canvas

小程序动态生成分享图片,用wx.createCanvasContext('myCanvas')将网络图片绘制出来,在开发者工具上可以,但是在真机上画不出来,想问下有没有哪位遇到过这个问题,是怎么解决的

//绘制分享图片

function drawImage(bg, logo, title, cb) {

    let that = this;

    const ctx = wx.createCanvasContext('myCanvas');

    //绘制背景

    wx.getImageInfo({

        src: bg,

        success(res) {

            ctx.drawImage(res.path, 0, 0, 315, 158.5);

            ctx.setFillStyle('rgb(255, 255, 255)')

            ctx.fillRect(20, 115, 100, 100)

            ctx.save()

        }

    })

    //绘制logo和标题

    setTimeout(function () {

    wx.getImageInfo({

        src: logo,

        success(res) {

            ctx.drawImage(res.path, 20, 115, 100, 100);

            ctx.setFontSize(20);

            ctx.setFillStyle('rgb(0, 0, 0)')

            ctx.fillText(title, 140, 200);

            ctx.save()

        }

    })

    }, 500)

    setTimeout(function () {

        ctx.draw(true, function (res) {

            wx.canvasToTempFilePath({

                canvasId: 'myCanvas',

                success(res) {

                    wx.uploadFile({

                        url: https.getDomain() + 'upload/upload-pic',

                        filePath: res.tempFilePath,

                        name: 'file',

                        dataType: 'json',

                        header: { 'content-type': 'application/x-www-form-urlencoded' },

                        success: function (res2) {

                            let jsonData = JSON.parse(res2.data);

                            if (jsonData.status == 1) {

                                return typeof cb == "function" && cb(jsonData.data)

                            } else {

                                wx.showToast({

                                    title: jsonData.msg,

                                    icon: '',

                                    duration: 20000

                                });

                            }

                        }

                    });


                }

            })

        })

    }, 1000)

}


网友回复

nickname:

downloadFile下载再画试试呢

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付