首页 > 其他分享 >前端海报生成

前端海报生成

时间:2023-06-18 16:23:21浏览次数:55  
标签:海报 text 前端 height width resImg 生成 image

说明

使用的canvas绘制海报

参数

参数 说明
width 海报总体宽度
height 海报总体高度
views 需要渲染到海报上面的元素,这是一个Array

views的属性,更多属性看代码把

属性 说明
type 支持imagetext
width
height
left 海报内部距离左边
top 海报内部距离顶边
src/content image/text

需要用到这个canvasPoster.js文件

实现

以下是在uniapp内实现的

<view>
	<h1>生成海报</h1>
	<button @click="generate">点击生成</button>
	<view class="box">
		<img :src="hbImg">
	</view>
</view>
import {canvas2Img} from '@/pages/index/canvasPoster.js'
export default {
		data() {
			return {
				hbImg: ""
			};
		},
		methods: {
			async generate() {
				console.log('生成海报');
				const resImg = await canvas2Img({
					width: '300',
					height: '400',
					quality: 1,
					views: [{
							type: 'image',
							width: '300',
							height: '400',
							left: 0,
							top: 0,
							src: '图片.jpg'
						},
						{
						  type: 'text',
						  content: '这是文字',
						  width: 300,
						  fontSize: 20,
						  fontFamily: 'Arial',
						  color: '#000',
						  left: 0,
						  top: 200,
						  maxLineNumber: 1,
						  lineHeight: 30
						}
					]
				})
				console.log(resImg);
				this.hbImg = resImg;
				console.log('lkk');
			}
		}
	}

标签:海报,text,前端,height,width,resImg,生成,image
From: https://www.cnblogs.com/tn666/p/17489264.html

相关文章

  • 使用MaskableGraphic画线段-生成Mesh方式
    usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;usingUnityEngine.UI;usingUnityEngine.EventSystems;publicclassUGUIPoplateMesh:MaskableGraphic,IPointerEnterHandler,IPointerExitHandler{protectedoverridevoidO......
  • 参与共建 SolidUI AI 生成可视化项目:开源社区的力量
    背景SolidUI是一个开源的AI生成可视化项目,旨在帮助开发者快速构建可视化界面。我们诚挚邀请您加入SolidUI社区,与我们共同打造更加优秀的开源项目。本文将为您介绍如何参与到SolidUI的共建中来,包括相关链接、当前项目进展以及如何为项目做出贡献。https://github.com/CloudOrc/Sol......
  • 参加了WOT全球技术创新大会2023,迅速整理了 《大前端最佳实践》专题的收获
    令人心动的WOT最近这段时间,我最期待的一件事就是6月17号这天的到来。因为之前51CTO的官网预告了"WOT全球技术创新大会2023"。(这个设计图怪好看的)点击进入大会的官网,大会的举办时间是6月16号、6月17号这两天。16号那天工作没时间,17号这天我挺早出发的。因为到的早,还玩了几个小游戏,......
  • 线程安全的随机数生成
    线程安全的随机数生成(金庆的专栏)*rand()不可重入*用线程专用存储保存随机数生成器*自动设置随机种子为设备随机数*线程退出时,自动析构生成器typedefboost::random::mt19937Generator;staticboost::thread_specific_ptr<Generator>s_pRng......
  • 前端Vue加载中页面动画弹跳动画loading
    前端Vue加载中页面动画弹跳动画loading,下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13091效果图如下:使用方法<!--ref:唯一ref top:距离中间顶部距离--><cc-loadingref="mixLoad":top="0"></cc-loading>//隐藏动画this.$refs.mix......
  • git 连接gitlab,生成密钥
    git连接gitlab1.下载并安装git和TortoiseGit-2.6.0.0-64bit.msi2.生成秘钥信息2.1新建.ssh文件夹在C:\Users\csj\.ssh2.2在.ssh目录下右键打开GitBash(.ssh目录不存在,则在任一目录下操作,或者手动创建该目录)2.3在弹出的窗口输入:ssh-keygen-trsa-C"5......
  • 前端学习C语言 - 数组和字节序
    数组本篇主要介绍:一维二维数组、字符数组、数组名和初始化注意点以及字节序。一维数组初始化有以下几种方式对数组初始化://定义一个有5个元素的数组,未初始化inta[5];//定义一个有5个元素的数组,将第一个初始化0,后面几个元素默认初始化为0inta[5]={0};//定义一个有5个元......
  • 前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈
    前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈 ,下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13085效果图如下:使用方法<!--分享ref:设置一个唯一refcontentHeight:弹框高度shareList:分享数组click:分享菜单按钮点击--......
  • 关于最小生成树
    关于最小生成树目录概述性质Prim算法实现例P1194买礼物Kruskal算法实现思想例P4047部落划分Part1概述一个连通图的生成树是一个极小的连通子图,它包含图中全部的n个顶点,但只有构成一棵树的n-1条边。我们定义无向连通图的最小生成树(MinimumSpannin......
  • 【AD20专栏】BOM表生成
    转载自:文章《AD19导出bom表的方法(按照元件不同数值分类,重点信息突出)》 我画电路图用的是AD19的软件,最后板子画好了要进行元器件采购要生成bom表,查了一下相关的资料,总结整理一下:1.在报告(report)打开BillofMaterials(在PcbDoc或者SchDoc打开都可以)。位置如下图所示: 2.为了按......