<template>
<view>
<uni-nav-bar leftIcon="arrowleft" :status-bar="true" fixed="true" color="#ffffff" bgImage="linear-gradient(45deg, #ec008c, #6739b6)" title="移动开发框架" />
<view class="drawBtn">图片拼接</view>
<!-- 画布 -->
<canvas class='canvas-poster' canvas-id='canvasposter'></canvas>
</view>
</template>
<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
data() {
return {
}
},
components: {
uniNavBar
},
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('图片路径', 238, 231, 320, 201);
/* 绘制第二张照片*/
ctx.drawImage('图片路径', 238, 676, 320, 201);
uni.showLoading({
title: '图片生成中...',
});
ctx.draw(false, this.getTempFilePath);
},
//获取临时路径
getTempFilePath: function() {
// 当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
uni.canvasToTempFilePath({
canvasId: 'canvasposter',
success: (res) => {
console.log(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>
.drawBtn{
width: 650upx;
height: 80upx;
line-height: 80upx;
text-align: center;
color: #FFFFFF;
background-image: linear-gradient(45deg, #ec008c, #6739b6);
border-radius: 20upx;
margin: 200upx 50upx;
}
/* 绘制图片canvas样式 */
.canvas-poster {
position: fixed;
width: 794px;
height: 1123px;
top: 100%;
left: 100%;
}
</style>
