uniapp中自定义生成海报图片

效果示例图

效果示例图

##代码块

<template><view class="cardPoster-wrap"><!-- 海报 --><canvas :canvas-id="canvasId" :id="canvasId" :style="{ height: canvasHeight + 'px' }"></canvas><view style="height: 100px;"></view><mz-footer><mz-confirm-button @click="savePosterHandle">保存</mz-confirm-button></mz-footer></view>
</template><script>
const context = uni.createCanvasContext('poster');
export default {data() {return {canvasId: 'poster',canvasHeight: 1200,localPath: ''};},onLoad() {},onShow() {this.initPoster();},methods: {/*** 初始化模板* **/initPoster() {const query = uni.createSelectorQuery();query.select('#' + this.canvasId).fields({ node: true, size: true }).exec(async res => {console.log('[开始]', res);const screenWidth = uni.getSystemInfoSync().screenWidth;const cardWidth = (screenWidth - 59) / 5;const cardHeight = 88.5;// 背景图片const bgImg = 'https://yugioh-1258002530.file.myqcloud.com/dtcg/bg.png';await this.downloadFileAPI(bgImg, 0, 0, screenWidth, this.canvasHeight);// 卡组标题const rhombusImg = 'https://yugioh-1258002530.file.myqcloud.com/dtcg/rhombus.png';await this.downloadFileAPI(rhombusImg, 14, 10, 12, 15);context.font = 'bold';context.fillStyle = 'rgba(26, 227, 192, 1)';context.setFontSize(20);context.fillText('卡组名称', 36, 25);// 副标题-数码蛋context.font = 'bold';context.fillStyle = '#FEFEFE';context.setFontSize(16);context.fillText('主卡', 14, 69);for (let i = 0; i < 5; i++) {const cardImg = 'https://www.cnblogs.com/images/cnblogs_com/520BigBear/1196074/t_dog.jpg';let xd = 16 + 6.5 * i + cardWidth * i;await this.downloadFileAPI(cardImg, xd, 98.5, cardWidth, cardHeight);}//副标题-卡组context.font = 'bold';context.fillStyle = '#FEFEFE';context.setFontSize(16);context.fillText('卡组', 14, 219);for (let i = 0; i < 45; i++) {const cardImg = 'https://www.cnblogs.com/images/cnblogs_com/520BigBear/1196074/t_dog.jpg';let xd = 16 + 6.5 * (i - Math.floor(i / 5) * 5) + cardWidth * (i - Math.floor(i / 5) * 5);let startTop = 242 + Math.floor(i / 5) * 10 + Math.floor(i / 5) * cardHeight;await this.downloadFileAPI(cardImg, xd, startTop, cardWidth, cardHeight);}/*** draw:将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中* **/context.draw(false, () => {//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径uni.canvasToTempFilePath({canvasId: this.canvasId,x: 0,y: 0,width: screenWidth,height: this.canvasHeight,success: res => {console.log('[生成图片]', res);this.localPath = res.tempFilePath;}});});});},/*** downloadFile:下载文件资源到本地* **/downloadFileAPI(imgUrl, dx, dy, dWidth, dHeight) {return new Promise(resolve => {/*** downloadFile:下载文件资源到本地* **/uni.downloadFile({url: imgUrl,success: function(res) {console.log('[]', res);/*** drawImage:绘制图像到画布* **/context.drawImage(res.tempFilePath, dx, dy, dWidth, dHeight);resolve();}});});},/*** 下载海报到本地* **/savePosterHandle() {uni.saveImageToPhotosAlbum({filePath: this.localPath,success: () => {uni.showToast({icon: 'none',title: '下载成功'});}});}}
};
</script><style lang="scss" scoped>
.cardPoster-wrap {width: 100%;height: 100%;margin: 0px auto;#poster {width: 100%;}
}
</style>

uniapp中自定义生成海报图片相关推荐

vue中实现生成海报图片html2canvas详细教程
该插件详细配置文档地址建议谷歌浏览器打开,因为翻译的比较准确实现效果如图所示 1.安装插件 npm install --save html2canvas 2.将要生成图片的区域用大的元素包裹起来例如 ...
html生成海报图片
html生成海报图片效果图(源码下载地址在文章底部) html源码: 需要引入的js文件: 手机在线演示: 源码下载:https://xson.cc/?page=1 效果图(源码下载地址在文章底部) ...
uniapp中自定义showModal样式
uniapp中自定义showModal样式页面中使用在main.js中引入show-modal组件创建组件show-modal 组件名称show-modal.vue 创建initModal.js ...
uniapp中自定义showToast样式
uniapp中自定义showToast样式使用方式在template中引入在需要使用show-toast的地方使用在main.js中挂在组件文件代码:组件show-toast show-to ...
uni-app如何生成海报图片
项目场景: 在uni-app中,通过点击邀请分享海报的方式,可以展示不同的海报,并通过扫描海报上的二维码来实现用户之间的关系绑定,从而实现分销功能: 每次生成的海报样式都可能不同,可以根据后台配置的宽 ...
小程序中如何实现编辑海报内容并生成海报图片（拖动那种）
开始找到了下面这个博客: 转自胜天一子半博客地址:https://blog.csdn.net/qq_37942845/article/details/80169907 在项目中遇到了一个需要编辑海 ...
H5 自定义生成海报
最近一切安好,就是少了几分勤快,人哪,精力还真是有限,过于专注于一方面,就会顾此失彼,长而久之,对物尚可,对人就不免有些'残忍',因为人与人之间大多是用感觉,关心,情感等来温暖.维系,并不是冷冰冰的物 ...
uniapp 截图或者生成海报
需求:uniapp移动端需要生成一张当前界面的海报方案一:类似于手机按钮截图效果.实现代码如下: doSaveScreen() { let $this = this; ...
小程序uniapp利用canvas生成海报并可以保存至相册
✨uniapp实现生成海报并保存至相册组件,u-popup可以根据自己所使用的组件进行替换这里主要讲的是JS部分,css和元素相关的就不展开赘述了,下方先给大伙看看效果图,图的下方有代码讲解,最下方 ...

uniapp中自定义生成海报图片

uniapp中自定义生成海报图片

效果示例图

uniapp中自定义生成海报图片相关推荐

最新文章

热门文章