<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>
网友回复