+
95
-

回答

<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('../../static/images/333.png', 238, 231, 320, 201);
                /* 绘制第二张照片*/
                ctx.drawImage('../../static/images/332.png', 238, 676, 320, 201);
				
				
		 // 设置字体大小和颜色
		ctx.setFontSize(20);
		ctx.setFillStyle('black');
				
		 // 绘制文字
		ctx.fillText('海报!', 50, 100);
                uni.showLoading({
                    title: '图片生成中...',
                });        
                ctx.draw(false, this.getTempFilePath);
            },
            //获取临时路径
            getTempFilePath: function() {
                // 当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径
                uni.canvasToTempFilePath({
                    canvasId: 'canvasposter',
                    success: (res) => {
                        console.log(res.tempFilePath)
						this.outpim=res.tempFilePath;
                      //  this.saveImageToPhotosAlbum(res.tempFilePath)//保存到相册
                    }
                })
            },
            //把生成的图片保存至相册
            saveImageToPhotosAlbum: function(imgUrl) {
                uni.hideLoading();
                if (imgUrl) {
                    uni.saveImageToPhotosAlbum({
                        filePath: imgUrl,
                        success: (res) => {
                            uni.showToast({
                                title: '保存成功',
                                icon: 'success',
                                duration: 2000
                            })
                        },
                        fail: (err) => {
                            uni.showToast({
                                title: '保存失败',
                                icon: 'none',
                                duration: 2000
                            })
                        }
                    })
                }
                else {
                    uni.showToast({
                        title: '绘制中……',
                        icon: 'loading',
                        duration: 3000
                    })
                }
            },
        }
    }
</script>
 
<style>
 
</style>

网友回复

我知道答案,我要回答