海报 - i'note

绘制海报

<view class="poster-test" :style="'height:'+(posterHeight+20)+'px;'">
    <canvas canvas-id="poster-qr" id='sss' :style="'width:'+posterWidth+'px;height:'+posterHeight+'px;'"></canvas>
</view>

computed: {
    windowW() {
        return uni.getSystemInfoSync().windowWidth;
    },
    windowH() {
        return uni.getSystemInfoSync().windowHeight;
    },
    qrsize() {
        let windowW = uni.getSystemInfoSync().windowWidth;
        return windowW * 0.7;
    },
    posterPadding(){
        return 40;
    },
    posterWidth(){
        let canvasWidth = this.qrsize + this.posterPadding * 2;
        return canvasWidth;
    },
    posterHeight(){
        let canvasHeight = this.posterWidth + 30 + this.posterPadding*2;
        return canvasHeight;
    },
},

// 制作二维码海报
makePoster(qrPath) {
    let that = this;
    let logoPath = require('@/pages/devices/device_info/static/poster_logo.png');

    console.log("rk===>[logo]", logoPath);

    let qr_padding = this.posterPadding;
    let canvasWidth = this.posterWidth;
    let canvasHeight = this.posterHeight;
    var ctx = uni.createCanvasContext('poster-qr'); //绑定画布
    
    // 绘制白色圆角背景
    const cornerRadius = 10; // 圆角半径
    ctx.setFillStyle('#ffffff'); // 设置填充颜色为白色
    ctx.beginPath();
    ctx.moveTo(cornerRadius, 0);
    ctx.arcTo(canvasWidth, 0, canvasWidth, canvasHeight, cornerRadius);
    ctx.arcTo(canvasWidth, canvasHeight, 0, canvasHeight, cornerRadius);
    ctx.arcTo(0, canvasHeight, 0, 0, cornerRadius);
    ctx.arcTo(0, 0, canvasWidth, 0, cornerRadius);
    ctx.closePath();
    ctx.fill();
    
    // qr
    let qr_size = this.qrsize;
    ctx.drawImage(qrPath, qr_padding, qr_padding, qr_size, qr_size); //填充进图片
    
    // logo 200 * 30;
    let logo_width = 200;
    let logo_height = 30;
    let logo_start_x = (canvasWidth - logo_width) / 2;
    let logo_start_y = canvasWidth;
    ctx.drawImage(logoPath, logo_start_x, logo_start_y, logo_width, logo_height); //填充进图片

    // 文字
    let text_x = canvasWidth/2;
    let text_y = logo_start_y + logo_height + qr_padding;
    ctx.setFillStyle('#000000'); //设置文字样式
    ctx.setFontSize(18);
    ctx.setTextAlign('center');
    ctx.fillText('使用 santibox APP 扫码添加设备', text_x, text_y);
    ctx.draw(); //输出到画布中
    
    uni.showLoading({ //增加loading等待效果
        mask: true
    })
    setTimeout(() => { //不加延迟的话，base64有时候会赋予undefined
        console.log("rk===>[laile]", );
        uni.canvasToTempFilePath({
            canvasId: 'poster-qr',
            success: (res) => {
                this.poster_test = res.tempFilePath
                console.log("rk===>[地址]", res.tempFilePath);
                that.savePoster(this.poster_test)
            },
            fail(err) {
                console.log("rk===>[生成失败]", err);
            },
        })
        uni.hideLoading();
    }, 1200)
},
savePoster(posterPath) {
    uni.saveImageToPhotosAlbum({ //保存图片
        filePath: posterPath,
        success: (res) => {
            uni.showToast({
                title: '保存成功',
            })
        }
    })
},

效果

FEATURED TAGS

iOS OC C Xcode MIMEType 屏幕旋转 Mac 工具 SQLite3 重命名证书+内购 Pod 像素 pch 支付协议税务 APP转让审核银行卡格式化 git 描述文件命令行沙盒日志 i386 x86_64 控制台log xcode10&iOS12 正则 textfield 输入限制真机支持封面尺寸 SDWebImage Ruby RVM 渐变色 jekyll 水印富文本标签 M3U8 动、静态库异步上传 Url编码解码 AlertController 保活 pod报错特定UI横竖屏 Launch版本号 ijkplayer 适配手势截图网络和信号礼物缓存手绘礼物 UIPickerView 文件权限键盘和菜单耗时卡顿国际化 Paypal AWSS3 npm、Node 控制台 warning 扩展防盗链动画分析 CallKit 侧滑重置根控制器播放器裁剪日志 bugly uniapp Swift 文字翻转跨域 WebClip 网络请求地图导航 ZSH SPM Vapor 导航验证码杀进程 Ubuntu Android JWT vue html-js style-class ssh PHP jks css Runtime tree uniCloud 圆角 flex block 图形验证码 gtm share Combine nvm github 存储备案总结

海报

Uniapp绘制海报

绘制海报

效果

CATALOG

FEATURED TAGS

FRIENDS