+
95
-

uniapp如何将多张图和文字排版生成图片海报?

uni
uniapp如何将多张图和文字排版生成图片海报?

网友回复

+
15
-
<template>
    <view>

        <view class="drawBtn" @tap="viewDrawToCanvas">图片拼接</view>
         
        <!-- 画布 -->
        <canvas class='canvas-poster' canvas-id='canvasposter'></canvas>
		<image :src="outpim" ></image>
    </view>
</template>
 
<script>

    export default {
        data() {
            return {
                 outpim:""
            }
        },

        onLoad() {
             
        },
        methods: {
            //绘制到canvas
            viewDrawToCanvas: function() {
                var ctx = uni.createCanvasContext('canvasposter');
                /* 绘制背景*/
                // (矩形左上角的 x 坐标,矩形左上角的 y 坐标 ,矩形的宽度(以像素计) ,矩形的高度(以像素计))
                // 注意因为Id为canvasposter的canvas设置了宽度和高度样式,两边要一致
                // 亦可以设置动态参数实现确保一致
                ctx.rect(0, 0, 794, 1123);
                // 背景填充颜色
                ctx.setFillStyle('white');
                // 绘制已填色的矩形
                ctx.fillRect(0, 0, 794, 1123);
                /* 绘制第一张照片*/
                // 参数说明:('图片路径',canvas的横坐标,canvas的纵坐标,图片的宽度,图片的宽度)
                ctx.drawImage('...

点击查看剩余70%

我知道答案,我要回答