uniapp的canvas画图的功能的实现,网络图片转化为本地图片绘制头像,

// 网路图片转化为本地图片的方法。。。。。

getNetworkImage(url) {
                return new Promise((resolve, reject) => {
                    uni.downloadFile({
                        url,
                        success: (e) => {
                            const p = e.tempFilePath
                            if (p.indexOf('json') > -1) {
                                reject(p)
                                return false
                            }
                            resolve(p)
                        },
                        fail: (r) => {
                            reject(r)
                        }
                    })
                })
            }

// 用canvas画图

var context = uni.createCanvasContext('firstCanvas')

// 用canvas画原型的头像
context.arc(25, 25, 25, 0, 2 * Math.PI, true)

(原点的x,原点的Y,半径,不知道,true就完事了)
context.clip()    
context.drawImage(this.localURL, 0, 0, 50, 50)  // 画图片在画布上

(图片地址,x,y,宽50,高50)

// 用canvas写字

context.setFontSize(11) //设置字体大小,默认10
context.setFillStyle('#fff') //文字颜色:默认黑色

context.fillText('姓名:罗新东',0,270)

// 画海报

ctx.draw(false, () => {
                            uni.canvasToTempFilePath({
                                x: 0,
                                y: 0,
                                width: 375,
                                height: uni.upx2px(1020),
                                destWidth: 375,
                                destHeight: uni.upx2px(1020),
                                canvasId: 'firstCanvas',
                                success: function(res) {
                                    uni.saveImageToPhotosAlbum({
                                        filePath: res.tempFilePath,
                                        success: function() {
                                            console.log('save success');
                                        }
                                    });
                                },
                                fail(e) {
                                    console.log(e);
                                    uni.showToast({
                                        title: '生成海报失败',
                                        icon: 'none'
                                    });
                                }
                            });
                        });

你可能感兴趣的:(小程序)