vue3+ts 分享海报
安装依赖1. npm install html2canvas --save
<div class="flex-box"><div><div v-for="(item,index ) in from.list" :key="index" @click="actvieFuntion(index)"><div>{{item}}</div><div :class="from.activeIndex == index?'box':'box-1'"></div></div></div><div class="left"><div class="">模板-{{from.activeIndex+1}}</div><div class="border-mo" ><div id="CodeImgBase64"><div class="b-p-i"><div class="bg"><div class="tutle"><div class="text">iQOO 11S 16GB+1TB 传奇版超算独显芯片|2K 144Hz E6 全感屏|第二代骁龙8|200W 超快闪充|索尼定制 VCS IMX866</div></div><div class="to-moeny"><span class="c-o">¥</span><span>8999.00</span><span class="y-m">原价9999.00</span></div><div class="img-w-h"><img src=".././../../static/code.png" alt=""></div></div></div></div></div><div class="b-l"><el-button type="primary" @click="createPoster">下载海报</el-button></div></div>
</div>
<script lang="ts" setup>import html2canvas from "html2canvas"import {ref,reactive} from 'vue'const dialogVisible = ref(true)var from = reactive({list: ['模板1', '模板2', '模板3'],activeIndex: 0,posterImg: '',})const actvieFuntion = (num: any) => {from.activeIndex = num}const createPoster = ()=> {// 生成海报const domObj = document.getElementById("CodeImgBase64")//显示海报html2canvas(domObj, {useCORS: true,allowTaint: false,logging: false,letterRendering: true,onclone(doc:any) {let e = doc.querySelector("#CodeImgBase64");e.style.display = "block";console.log(doc)}}).then((canvas:any)=> {// 在微信里,可长按保存或转发var a = canvas.toDataURL("image/png");console.log(a)});}
</script>
<style scoped lang="scss">.dialog-footer button:first-child {margin-right: 10px;}.flex-box {display: flex;.box {width: 200px;height: 300px;border-radius: 10px;border: 3px solid #00aa00;}.box-1 {width: 200px;height: 300px;border-radius: 10px;border: 3px solid #aaaaaa;}.left {margin-left: 100px;.border-mo {width: 400px;height: 600px;border: 3px solid #aaaaaa;border-radius: 10px;}.b-l {width: 400px;text-align: center;margin-top: 30px;}}#CodeImgBase64{width: 400px;height: 600px;background-color: #ffffff;border-radius: 10px;}.b-p-i{width: 350px;height: 550px;background-color: #dcdcdc;margin: auto;border-radius: 10px;position: relative;top: 10px;}.bg{background-image: url('../../../static/phone.png');background-repeat: no-repeat;width: 350px;height: 400px;background-size: cover;margin: auto;border-radius: 10px;.tutle{position: relative;top: 328px;background: rgba(#000, 0.4);margin: auto;color: #fff;border-radius: 0px 0px 10px 10px;.text{width: 340px;margin: auto;font-size: 13px;}}.to-moeny{position: relative;top: 338px;left: 20px;font-size: 20px;font-weight: bold;color:red;.c-o{font-size: 12px;color:red;margin-right: 2px;}}.y-m{font-size: 10px;margin-left: 5px;color: #aaaaaa;text-decoration: line-through;font-weight: 400;}.img-w-h{position: relative;top: 358px;width: 70px;margin: auto;img{width: 70px;height: 70px;}}}}
</style>
相关文章:

vue3+ts 分享海报
安装依赖1. npm install html2canvas --save<div class"flex-box"><div><div v-for"(item,index ) in from.list" :key"index" click"actvieFuntion(index)"><div>{{item}}</div><div :class"…...

Ubuntu23.10将推出全磁盘加密功能,提高系统安全性
Canonical 宣布其即将推出的 Ubuntu 23.10(Mantic Minotaur)将引入基于 TPM 的全磁盘加密的初步支持。这个特性将利用系统可信平台模块(TPM),在系统级别上进行全磁盘加密,从而提高系统的安全性。 但需要注…...

防火墙的设置主要是为了防范什么
防火墙的设置主要是为了防范网络攻击和数据泄露。随着互联网的普及和信息化的加速,网络安全问题越来越受到人们的关注。其中,防火墙是一种常见的网络安全设备,其设置的重要性也日益凸显。 防火墙的设置主要是为了防范什么 防火墙的设置主要目…...

Vim9和其他软件的文本复制、粘贴
大家都知道:在Vim9中使用y和p命令来进行文本的复制和粘贴,今天我来说一说Vim和其他软件之间的文本复制、粘贴操作。 Vim9和其他软件进行复制、粘贴,其原理就是通过系统剪贴板作为中介来执行操作。 一、从Vim9复制文本内容 按住鼠标左键滑出…...

MySQL学习5:事务、存储引擎
事务 简介 事务是一组数据库操作的执行单元,它要么完全执行,要么完全不执行。事务是确保数据库中的数据一致性和完整性的重要机制之一。 事务具有以下四个特性(称为ACID特性): 原子性(Atomicity…...

redis如何保证接口的幂等性
背景 如何防止接口中同样的数据提交,以及如何保证消息不被重复消费,这些都是shigen在学习的过程中遇到的问题。今天,趁着在学习redis的间隙,我写了一篇文章进行简单的实现。 注意:仅使用于单机的场景,对于…...

避坑之路 —— 前后端 json 的注意问题
当我们在进行开发项目的时候,在前后端需要进行数据之间的传输,那么就会需要到json。而json算是字符串中的一种 1.先说一下前端的, 其实这两种都是表示前端希望能收到后端json这样的数据格式,那么我们在后端就需要注意将数据进行转换为json进…...

[构建 Vue 组件库] 小尾巴 UI 组件库 —— 横向商品卡片(仿淘宝)
文章归档于:https://www.yuque.com/u27599042/row3c6 组件库地址 npm:https://www.npmjs.com/package/xwb-ui?activeTabreadmegitee:https://gitee.com/tongchaowei/xwb-ui 下载 npm i xwb-ui配置 按需导入 import {组件名 } from xwb-…...

【Python】Python实现五子棋游戏(带可视化界面)【独一无二】
👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…...

用Maloja创建音乐收听统计数据
什么是 Maloja ? Maloja 是简单的自托管音乐记录数据库,用于创建个人收听统计数据。没有推荐,没有社交网络,没有废话。Maloja 是一个跟踪您一段时间内的收听习惯的工具。 官方演示站点:https://maloja.krateng.ch/ 导出…...

GRU门控循环单元
GRU 视频链接 https://www.bilibili.com/video/BV1Pk4y177Xg?p23&spm_id_frompageDriver&vd_source3b42b36e44d271f58e90f86679d77db7Zt—更新门 Rt—重置门 控制保存之前一层信息多,还是保留当前神经元得到的隐藏层的信息多。 Bi-GRU GRU比LSTM参数少 …...

使用Puppeteer构建博客内容的自动标签生成器
导语 标签是一种用于描述和分类博客内容的元数据,它可以帮助读者快速找到感兴趣的主题,也可以提高博客的搜索引擎优化(SEO)。然而,手动为每篇博客文章添加合适的标签是一件费时费力的工作,有时候也容易遗漏…...

大数据分析案例-基于随机森林算法构建二手房价格预测模型
🤵♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞Ǵ…...

SLAM从入门到精通(ROS安装)
【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 ROS科研上面用的多,实际生产其实用的也不少。它本身还是很好的应用框架。当然,它对于很多初学的同学来说还是很友好的。学完…...

Linux 下spi设备驱动
参考: Linux kernel 有关 spi 设备树参数解析 Linux kernel 有关 spi 设备树参数解析 - 走看看 Linux SPI驱动框架(1)——核心层 Linux SPI驱动框架(1)——核心层_linux spi驱动模型_绍兴小贵宁的博客-CSDN博客 Linux SPI驱动框架(2)——控制器驱动层 Linux SPI驱…...

一:图形的位置和尺寸测量
绘制的基本要素: onDraw(Canvas):是用来重写的 Canvas:实际执行绘制的 Paint:调整粗细和颜色等 坐标系:以屏幕左上角为原点,向右、向下为正向数值的坐标系 尺寸单位:在绘制过程中所有的尺寸单位都是px…...

rtthread下基于spi device架构MCP25625驱动
1.CAN驱动架构 由于采用了RTT的spi device架构,不能再随心所遇的编写CAN驱动 了,之前内核虽然采用了RTT内核,但是驱动并没有严格严格按RTT推荐的架构来做,这次不同了,上次是因为4个MCP25625挂在了4路独立的SPI总线上&…...

Open3D 点云投影到圆柱(python详细过程版)
目录 一、算法原理1、圆柱方程2、投影原理二、代码实现三、结果展示1、原始点云2、投影结果四、参考链接一、算法原理 1、圆柱方程 圆柱方程可以表示为: ( x − x...

Unity实战(10):如何将某个相机的画面做成贴图(RenderTexture)
目录 前言 一、创建物体、材质与相机 二、将RenderTexture赋给材质 2.1 修改rt1的一些属性 2.2 将rtMat1材质的shader改为Unlit/Texture,并将rt1赋给这个材质 三、效果呈现 前言 本文记录如何将某个相机的画面做成贴图,即游戏某些场景中小地图做法…...

STL- 函数对象
1 函数对象 1.1 函数对象概念 概念: 重载函数调用操作符的类,其对象常称为函数对象函数对象使用重载的()时,行为类似函数调用,也叫仿函数 本质: 函数对象(仿函数)是一个类,不是一个函数 1.2 函数对象…...

前端 JS 经典:上传文件
重点:multipart/form-data 后端识别上传类型必填 1. form 表单上传 <!-- enctype"multipart/form-data" 这个必填 --> <form action"http://127.0.0.1:8080/users/avatar" method"post" enctype"multipart/form-data…...

数据分析面试
数据分析相关的职位面试可以拆解为以下三块: 1)技术基础 2)项目经验提问 3)业务问题 【数据分析与挖掘(二)】面试题汇总(附答案)_数据分析面试常见问题及答案_youthlost的博客-CSDN博客 我裸辞去面试p…...

Open3D(C++) 整体最小二乘拟合平面
目录 一、算法原理1、算法过程2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。 一、算法原理 1、算法过程 最小二乘拟合平面认为点云数据系数矩阵不存在误差,然而由于观测条件的限制,观测向量、系数矩阵都有可能存在误差,那么最小二乘方法就不再是最…...

【android12-linux-5.1】【ST芯片】【RK3588】【LSM6DSR】HAL源码分析
一、环境介绍 RK3588主板搭载Android12操作系统,内核是Linux5.10,使用ST的六轴传感器LSM6DSR芯片。 二、芯片介绍 LSM6DSR是一款加速度和角速度(陀螺仪)六轴传感器,还内置了一个温度传感器。该芯片可以选择I2C,SPI通讯,还有可编程终端,可以后置摄像头等设备,功能是很…...

MT8788安卓核心板详细参数_MTK安卓主板开发板智能通讯模块
MT8788安卓核心板集成了一个高效的12nm SoC,内置4G LTE调制解调器,将强大的硬件与到处可连接的全面功能设计相结合。 MTK8788智能终端具备许多功能,包括4G、2.4G/5G双频WiFi、蓝牙4.2BLE、2.5W功放、USB、mipi屏接口、三路摄像头接口、GPS和…...

C++String模拟实现
实际上string没什么可讲,主要是对string函数的运用与理解,与其写库函数如何用,不如直接去看c库函数来得好。 以下是自己实现string功能函数。但没对string库中的全部函数进行实现,而是实现主要使用的。 .cpp内是用来测试函数功能…...

Java 设置免登录请求接口被拦截问题
1、在设置免登录时,前端将请求的路由添加到白名单后,请求接口还是被拦截到了,将请求接口也设置后还是会被拦截跳转到登录页面 通过JAVA 注解 Anonymous 进行设置匿名访问就可以了...

(其他) 剑指 Offer 67. 把字符串转换成整数 ——【Leetcode每日一题】
❓ 剑指 Offer 67. 把字符串转换成整数 难度:中等 写一个函数 StrToInt,实现把字符串转换成整数这个功能。不能使用 atoi 或者其他类似的库函数。 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为…...

【MySQL】一文详解MySQL,从基础概念到调优
作者简介 前言 博主之前写过一个MySQL的系列,从基础概念、SQL到底层原理、优化,专栏地址: https://blog.csdn.net/joker_zjn/category_12305262.html?spm1001.2014.3001.5482 本文会是这个系列的清单,拉通来聊一聊Mysql从基础概…...

机器学习——boosting之提升树
提升树和adaboost基本流程是相似的 我看到提升树的时候,懵了 这…跟adaboost有啥区别??? 直到看到有个up主说了,我才稍微懂 相当于,我在adaboost里的弱分类器,换成CART决策树就好了呗࿱…...