时间: 2020-08-31|tag:26次围观|0 条评论

```// 创建画布区域                let context = uni.createCameraContext('posterCanvas');                // 获取屏幕的消息                let systemInfo = new Promise((res, rej) => {                    uni.getSystemInfo({                        success: (data) => {                            res(data);                        }                    });                });                systemInfo.then(systemInfo => {                    // 获取不同设备的宽高适配                    let {                        windowWidth,                        windowHeight                    } = systemInfo;                    let rpx = 1;                    // 个性化定义针对不同设备的单位比率,和标准设计稿375比较                    rpx = windowWidth / 375;                    context.clearRect(0, 0, 279 * rpx, 385 * rpx);                    //设置海报背景为白色                    context.fillStyle = "#fff";                    // 填充背景颜色                    context.fillRect(0, 0, 279 * rpx, 385 * rpx);                    let path = this.posterBanner; // posterbanner是一个固定的图片链接                    let imagePromise = [img1, img2];                    imagePromise = imagePromise.map(src => {                        return new Promise((res, rej) => {                            //不获取一下图片信息会导致图片在真机上绘制失败                            uni.getImageInfo({                                src,                                success: data => {                                    console.log("imgdata--->", data);                                    res(data);                                },                                fail(err) {                                    console.log("err", err);                                }                            });                        });                    });                    Promise.all(imagePromise).then(imgsInfo => {                        context.drawImage(                            imgsInfo[0].path,                            12.5 * rpx,                            12.5 * rpx,                            254 * rpx,                            173 * rpx                        );                        context.setFontSize(14 * rpx);                        context.setTextAlign("center");                        context.setFillStyle("#390C59");                        context.fillText(                            "xxxxxxxxxxxx一段文字",                            (279 * rpx) / 2,                            205.5 * rpx                        );                        context.setFontSize(14 * rpx);                        context.setTextAlign("center");                        context.setFillStyle("#390C59");                        context.fillText("xxxx一段文字!", (279 * rpx) / 2, 226.5 * rpx);                        context.drawImage(                            imgsInfo[1].path,                            102 * rpx,                            262.5 * rpx,                            75 * rpx,                            75 * rpx                        );                        context.setFontSize(12 * rpx);                        context.setTextAlign("center");                        context.setFillStyle("#390C59");                        context.fillText("长按扫码查看详情", (279 * rpx) / 2, 360.5 * rpx);                        context.draw(false, () => {                            //因为draw是异步的,移动端偶发绘制文字丢失,所以增加settimeout                            setTimeout(() => {                                uni.canvasToTempFilePath({                                    canvasId: "posterCanvas",                                    destWidth: 558 * 2,                                    destHeight: 770 * 2,                                    success(res) {                                        //拿到生成的画布图片临时路径在res.tempFilePath中,可以自行存储或者赋值                                    }                                });                            }, 100);                        });                    });                })

文章转载于:https://www.jianshu.com/p/5b29c4477161

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《2020-06-15
   

还没有人抢沙发呢~