2020-06-15

```// 创建画布区域
                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);
                        });
                    });
                })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序下拉列表框菜单

    达达前端
  • 第十九节:Java基本数据类型,循环结构与分支循环

    byte -> short,char -> int -> long float -> double long -> double int -> float

    达达前端
  • 小程序基础知识点讲解-WXML + WXSS + JS,生命周期

    查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/

    达达前端
  • 2、通过helloworld来认识下backbone

    先来说一下这个helloworld的功能: 在页面上有一个报道的按钮,点击弹出输入框,输入内容,确认,最后内容会加到页面上。页面图如下:

    the5fire
  • 用 XML 文件持久化和恢复图片信息

    跟着阿笨一起玩NET
  • 【Flutter 专题】27 易忽略的【小而巧】的技术点汇总 (四)

    对于加载网络图片时,添加一个加载动画或网络图片异常时添加一个错误图片会给用户一个良好的体验,此时 CachedNetworkImage 可以帮我们解...

    阿策
  • 微信小程序开发教程-从零开始(2)

    Bison
  • Nacos做配置中心经常被问到的问题

    通过@NacosPropertySource可以注入一个配置文件,如果我们需要将配置分类存储或者某些配置需要共用,这种需求场景下,一个项目中需要加载多个配置文件...

    猿天地
  • 利用LUA协程实现FUTURE模式

    1. Future模式: 参见 http://www.cnblogs.com/zhiranok/archive/2011/03/26/Future_Patter...

    知然
  • (第二季)Vue2.0-全局API

    全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API...

    楠楠

扫码关注云+社区

领取腾讯云代金券