当前位置：首页 > news >正文

记录一次前端绘画海报的过程及遇到的几个问题

news 来源：原创 2025/5/16 19:56:12

先看效果

在这里插入图片描述

使用工具 html2canvas

import html2canvas from 'html2canvas'// 绘画前的内容  我就不过多写了<div class="content" ref="contentRef" v-show="!imgShow"><img :src="getReplaceImg(friendObj.coverUrl)" alt="" class="topImg">
</div>//  canvas 绘画后的东西<div class="content padding0" v-show="imgShow"><van-icon name="cross" class="vanCross" @click.stop="clickDelete"/><img :src="imageUrl" alt="" class="bigImg"></div>//对前端html内容进行绘画
onLongPress(){setTimeout(() => {//生成图片let that = this;let drewPoster = that.$refs.contentRefhtml2canvas(drewPoster, {dpi: 300, //解决生产图片模糊useCORS: true,allowTaint: false,logging: false,}).then(function (canvas) {that.imageUrl = canvas.toDataURL("image/png");that.imgShow = trueToast.clear()})})},
// 但是因为前端中有img标签导致画的时候跨域了

解决跨域方法1 用 images.weserv.nl 公共图片库

if (process.env.NODE_ENV === 'prod') {return url.indexOf('sss.bd.com.cn') !== -1 ? url.replace(/^(http)[s]*(:\/\/)/, 'https://images.weserv.nl/?url=') : url} else {return url.indexOf('sss-uat.bd.com.cn') !== -1 ? url.replace(/^(http)[s]*(:\/\/)/, 'https://images.weserv.nl/?url=') : url}

解决跨域方法2 前端自己做跨域设置通过wechat_image做代理访问跨域的图片

vue项目     default.conf  配置 nginx 配置location /wechat_image {#proxy_set_header Host "$arg_host";proxy_set_header Referer "";resolver 114.114.114.114;proxy_pass $arg_url;}

页面中对应图片地址

 getReplaceImg(url) {if(!url) returnif (process.env.NODE_ENV !== 'development') {const baseUrl = `${ process.env.VUE_APP 自己项目的域名  }/wechat_image`const newUrl = `${ baseUrl }?url=${ url 实际图片地址}`return newUrl}// https://sss-uat.bb.com.cn/wechat_image?url=https://s-f-uat.jetour.com.cn/2024-12-26/1735204221531/u=4293302727,535734201.jpg},

前端本地想看效果需要在vue.config 里面配置代理

     proxyTable: {'/wechat_image': {target:'http://localhost:8070',changeOrigin: true,pathRewrite: {'^/api': ''}}

但是遇到个坑

https://s-f-uat.jetour.com.cn/2024-12-26/1735204221531/u=4293302727,535734201&fm=26.jpg图片中有fm 导致解析图片一直有问题  fm会作为参数去请求导致有问题  有方法解决了麻烦告知下

记录一次前端绘画海报的过程及遇到的几个问题

先看效果使用工具 html2canvas import html2canvas from html2canvas// 绘画前的内容我就不过多写了<div class"content" ref"contentRef" v-show"!imgShow"><img :src"getReplaceImg(friendObj.coverUrl)" alt"&qu…...

编程日记 2025/5/16 19:56:12

费舍尔信息矩阵全面讲述

费舍尔信息矩阵（Fisher Information Matrix） 费舍尔信息矩阵是统计学中一个非常重要的概念，尤其在参数估计、最大似然估计（MLE）和贝叶斯推断中具有广泛的应用。它反映了参数估计的不确定性程度，也可以用来…...

编程日记 2025/5/16 18:32:09

【CSS in Depth 2 精译_094】16.2：CSS 变换在动效中的应用（下）——导航菜单的文本标签“飞入”特效与交错渲染效果的实现

当前内容所在位置（可进入专栏查看其他译好的章节内容） 第五部分添加动效 ✔️【第 16 章变换】 ✔️ 16.1 旋转、平移、缩放与倾斜 16.1.1 变换原点的更改16.1.2 多重变换的设置16.1.3 单个变换属性的设置 16.2 变换在动效中的应用 16.2.1 放大图标&am…...

编程日记 2025/5/16 19:36:30

webpack3 webpack4 webpack5 有什么区别

性能优化 Webpack 3 性能优化主要依赖开发者手动配置各种插件。例如，在代码分割方面，需要通过CommonsChunkPlugin来实现公共模块的提取，其配置相对复杂。如果配置不当，可能会导致模块重复打包等问题，影响构建效率和最终…...

编程日记 2025/5/10 11:34:56

vue2 升级为 vite 打包

VUE2 中使用 Webpack 打包、开发，每次打包时间太久，尤其是在开发的过程中，本文记录一下 VUE2 升级Vite 步骤。安装 Vue2 Vite 依赖 dev 依赖 vitejs/plugin-vue2": "^2.3.3 vitejs/plugin-vue2-jsx": "^1.1.1 vite&…...

编程日记 2025/5/16 17:41:21

[创业之路-206]：《华为战略管理法-DSTE实战体系》- 6-关键成功因素法CSF

目录一、概述 1、定义与起源 2、关键成功因素的定义 3、关键成功因素的来源 4、关键成功因素的确认方法 5、关键成功因素法的步骤 6、关键成功因素法的应用 7、关键成功因素法的优势与局限性二、关键成功因素法CSF的应用 1、企业战略管理 2、项目管理 3、绩效管…...

编程日记 2025/5/16 19:45:46

WebRTC服务质量（08）- 重传机制（05) RTX机制

WebRTC服务质量（01）- Qos概述 WebRTC服务质量（02）- RTP协议 WebRTC服务质量（03）- RTCP协议 WebRTC服务质量（04）- 重传机制（01) RTX NACK概述 WebRTC服务质量（…...

编程日记 2025/5/12 13:42:16

Go的select的运行原理

Go语言中的select语句是一种专门用于处理多个通道（channel）操作的控制结构。其运行原理可以概括为以下几点： 1. 监听多个通道 select语句能够同时监听多个通道上的操作，这些操作可以是发送操作或接收操作。每个通道操作都对应se…...

编程日记 2025/5/15 8:53:37

操作002：HelloWorld

文章目录操作002：HelloWorld一、目标二、具体操作1、创建Java工程①消息发送端（生产者）②消息接收端（消费者）③添加依赖 2、发送消息①Java代码②查看效果 3、接收消息①Java代码②控制台打印③查看后台管理界面操作…...

编程日记 2025/5/15 10:09:22

3D坐标下，一点在某一线段上的左右方向的判定

3D坐标下，一点在某一线段上的左右方向的判定代码代码 #include <iostream> #include <Eigen/Dense>#define M_PI 3.1415926// 计算三点组成平面的参数和变换到XOY平面的变换矩阵 void computePlaneAndTransform(const Eigen::Vector3d& P1, cons…...

编程日记 2025/5/16 19:21:58

Visual Studio 使用 GitHub Copilot 与 IntelliCode 辅助编码【AI辅助开发系列】

🎀🎀🎀【AI辅助编程系列】🎀🎀🎀 Visual Studio 使用 GitHub Copilot 与 IntelliCode 辅助编码Visual Studio 安装和管理 GitHub CopilotVisual Studio 使用 GitHub Copilot 扩展Visual Studio 使用 GitHu…...

编程日记 2025/5/16 19:48:51

Linux高级--2.4.5 靠协议头保证传输的 MAC/IP/TCP/UDP---协议帧格式

任何网络协议，都必须要用包头里面设置写特殊字段来标识自己，传输越复杂，越稳定，越高性能的协议，包头越复杂。我们理解这些包头中每个字段的作用要站在它们解决什么问题的角度来理解。因为没人愿意让包头那么复杂。本…...

编程日记 2025/5/16 19:52:10

【UE5 C++课程系列笔记】14——GameInstanceSubsystem与动态多播的简单结合使用

效果通过在关卡蓝图中触发GameInstanceSubsystem包含的委托，来触发所有绑定到这个委托的事件，从而实现跨蓝图通信。步骤 1. 新建一个C类这里命名为“SubsystemAndDelegate” 引入GameInstanceSubsystem.h，让“SubsystemAndDelegate”继承…...

编程日记 2025/5/10 17:20:40

PyQt实战——随机涂格子的特色进度条（十一）

系类往期文章： PyQt5实战——多脚本集合包，前言与环境配置（一） PyQt5实战——多脚本集合包，UI以及工程布局（二） PyQt5实战——多脚本集合包，程序入口QMainWindow（三&…...

编程日记 2025/5/16 13:26:06

.NET 8.0 项目升级到 .NET 9.0

本文项目从.NETCore3.1开始一直延续到目前，如果您没有升级过，请参考以下文章： .Net Core 2.2 升级到 .Net Core 3.1：https://blog.csdn.net/hefeng_aspnet/article/details/131259537 NetCore3.1或Net6.0项目升级到Net7.0&#x…...

编程日记 2025/5/16 19:26:29

用Python写炸金花游戏

文章目录 **代码分解与讲解**1. **扑克牌的生成与洗牌**2. **给玩家发牌**3. **打印玩家的手牌**4. **定义牌的优先级**5. **判断牌型**6. **确定牌型优先级**7. **比较两手牌的大小**8. **打印结果** 完整代码以下游戏规则： 那么我们要实现的功能，就是…...

编程日记 2025/5/15 12:03:27

深度学习中的并行策略概述：2 Data Parallelism

深度学习中的并行策略概述：2 Data Parallelism 数据并行（Data Parallelism）的核心在于将模型的数据处理过程并行化。具体来说，面对大规模数据批次时，将其拆分为较小的子批次，并在多个计算设备上同时进行处…...

编程日记 2025/5/12 23:26:16

电商平台能挡住恶意网络爬虫的攻击吗？

爬虫盗取电商数据的步骤爬虫技术作为一种数据获取工具，正逐渐成为电商平台的一大隐患。网络爬虫不仅能够获取商家关键信息并滋生仿冒网站，还能收集用户敏感信息，对用户的财产安全和隐私造成严重威胁。同时，爬虫攻击还会扰乱正常…...

编程日记 2025/5/10 7:27:48

配置环境和 Jenkins 官方的 yum 源之后进行安装 # 关闭防火墙 $ sudo systemctl stop firewalld $ sudo systemctl disable firewalld# 安装 EPEL 源 $ sudo yum install -y epel-release # 安装 wget $ sudo yum install -y wget# 配置 Jenkins 官方 yum 源 $ sudo wget -O /…...

编程日记 2025/5/16 19:14:23

Nginx性能优化全方案：打造一个高效服务器

提到前面：一个热衷技术，反对八股的资深研发，不卖课不引流，专注分享高质量教学博客。如果觉得文章还不错的话，可以点赞收藏关注支持一下，持续分享高质量技术博客。如果有什么需要改进的地方还请大佬指出❌…...

编程日记 2025/5/16 16:51:02

【每日学点鸿蒙知识】沙箱目录、图片压缩、characteristicsArray、gm-crypto 国密加解密、通知权限

1、HarmonyOS 如何创建应用沙箱目录？ 下载文件，想下载到自己新建的应用沙箱目录，有什么方法实现吗？ fs.mkdir可以创建目录参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis…...

编程日记 2025/5/16 18:59:22

XMLHttpRequest的基础知识

get请求 const xml new XMLHttpRequest(); xml.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true); xml.onreadystatechange function () {if (xml.readyState 4 && xml.status 200) {console.log(xml.responseText);} }…...

编程日记 2025/5/16 19:56:09

学习笔记（C#基础书籍）-- C#基础篇

（12.24） C#介绍：《第一章》特点：语法简洁，面向对象，支持绝大部分的web标准，强大的安全机制（垃圾回收器），兼容性好（遵循.NET的公共语言规范【CL…...

编程日记 2025/5/16 18:21:31

现在有什么赛道可以干到退休？

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家：点击跳转到网站 ，对人工智能感兴趣的小伙伴可以点进去看看。最近，一则“90后无论男女都得65岁以后退休”的消息在多个网…...

编程日记 2025/5/6 0:14:44

【VScode】第三方GPT编程工具-CodeMoss安装教程

一、CodeMoss是什么？ CodeMoss是一款集编程、学习和办公于一体的高效工具。它兼容多种主流平台，包括VSCode、IDER、Chrome插件、Web和APP等，支持插件安装，尤其在VSCode和IDER上的表现尤为出色。无论你是编程新手还是资深开发者&a…...

编程日记 2025/5/10 12:29:58

选择屏幕的用法

**************************定义控件*********************************** SELECTION-SCREEN BEGIN OF BLOCK b1 WITH FRAME TITLE text-002. SELECT-OPTIONS bukrs FOR iloa-bukrs . "公司代码 SELECT-OPTIONS swerk FOR iloa-swerk OBLIGATORY . "工厂 SELECT-O…...

编程日记 2025/5/13 9:03:05

VirtualBox下ubuntu23.04使用主机串口以及使用 minicom 进行串口调试

VirtualBox下ubuntu23.04使用主机串口以及使用 minicom 进行串口调试一、打开设备管理器看主机（Window系统）是否识别出串口，我这边显示的串行通信端口是COM3 二、打开VirtualBox，设置串口和USB设备串口设置： 启用…...

编程日记 2025/5/16 15:35:40

CH340系列芯片驱动电路·CH340系列芯片驱动！！！

目录 CH340基础知识 CH340常见类型 CH340引脚功能讲解 CH340驱动电路 CH340系列芯片数据手册编写不易，仅供学习，请勿搬运，感谢理解常见元器件驱动电路文章专栏连接 LM7805系列降压芯片驱动电路降压芯片驱动电路详解-CSDN博客 ME62…...

编程日记 2025/5/16 17:28:34

Unity中使用环形缓冲区平滑抖动值

环形缓冲数据结构，就是如下图一样的一个收尾相接的列表在index指针指到4时，再往里添加数据，index就会指向0，并覆盖已有数据。如何绘制Sin函数，请看下面一篇文章 Unity中如何实现绘制Sin函数图像-CSDN博客接下来要…...

编程日记 2025/5/16 19:47:39

如何通过HTTP API插入或更新Doc

本文介绍如何通过HTTP API向Collection中插入或更新Doc。说明若调用本接口时Doc Id已存在，则等同于更新Doc；Doc Id不存在，则等同于插入Doc。若调用本接口时不指定Doc Id，则等同于插入Doc，DashVector会自动生成Doc …...

编程日记 2025/5/16 17:38:45

RTMW:实时多人2D和3D 全人体姿态估计

单位：上海AI实验室代码：mmpose/tree/main/projects/rtmpose 系列文章目录 RTMO: 面向高性能单阶段的实时多人姿态估计目录系列文章目录摘要一、背景二、相关工作2.1 自上而下的方法。2.2 坐标分类。2.3 3D Pose 3 实验方法3.1.1 任务限制3.1.3训练技…...

编程日记 2025/5/16 19:38:51

《Java源力物语》-3.空值猎手

~犬📰余~ “我欲贱而贵，愚而智，贫而富，可乎？ 曰：其唯学乎” \quad 夜色渐深，在一处偏僻小径上，月光透过浓密的源力云层，在地面上投下斑驳的光影。String正独自练习着刚从…...

编程日记 2025/5/16 19:05:43

macrodroid通过http请求控制手机运行宏

macrodroid adb命令 adb shell pm grant com.arlosoft.macrodroid android.permission.WRITE_SECURE_SETTINGS例:http请求手机播放指定MP3文件声音素材_电量过低提醒新建一个宏添加触发器-连接-http服务器请求路径随意填,最好不要有特殊符号,不然浏览器识别链接会出错,…...

编程日记 2025/5/16 9:36:32

Redis分片集群+MQ处理高并发

Redis的三大集群模式：主从复制、哨兵模式和Cluster模式。每种模式都有其特点和应用场景，具体如下： 主从复制模式：适用于数据备份和读写分离场景，配置简单，但在主节点故障时需要手动切换。哨兵模式&#xff…...

编程日记 2025/5/16 17:43:42

Linux内核 -- UIO (User-space I/O) 简介与使用笔记

UIO (User-space I/O) 简介 UIO (User-space I/O) 是 Linux 内核提供的一种机制，用于简化设备驱动的开发。它将设备的硬件资源（如内存映射、中断等）通过简单的接口暴露给用户空间程序，从而使用户可以在用户空间编写复杂的设备逻辑…...

编程日记 2025/5/16 12:29:25

《计算机组成及汇编语言原理》阅读笔记：p86-p115

《计算机组成及汇编语言原理》学习第 6 天，p86-p115 总结，总计 20 页。一、技术总结 1.if statement 2.loop 在许多编程语言中，有类种循环：一种是在程序开头检测条件(test the condition),另一种是在程序末尾检测条件。 3.C…...

编程日记 2025/5/16 2:33:38

Python爬虫实战（保姆级登网页信息爬取教程）

此blog为爬虫实战教学，代码已附上，可以复制运行。若要直接看实战代码翻到博客后半部分。本文使用selenium库进行爬虫，实现爬取数据操作，此库是通过模仿用户的操作进行对页面的处理。了解了这个思维模式，可以对代码进…...

编程日记 2025/5/15 11:29:42

探索CSDN博客数据：使用Python爬虫技术

探索CSDN博客数据：使用Python爬虫技术在数字化的浪潮中，数据的获取与分析变得日益关键。CSDN作为中国领先的IT社区和服务平台，汇聚了海量的技术博客与文章，成为一座蕴藏丰富的数据宝库。本文将引领您穿梭于Python的requests和py…...

编程日记 2025/5/16 10:36:53

PPT画图——如何设置导致图片为600dpi

winr，输入regedit打开注册表按路径找，HKEY_CURRENT_USER\Software\Microsoft\Office\XX.0\PowerPoint\Options（xx为版本号，16.0 or 15.0或则其他）。名称命名：ExportBitmapResolution 保存即可，…...

编程日记 2025/5/16 15:45:15

uniapp——APP读取bin文件，解析文件的数据内容（二）

文章目录读取bin文件内容，发送给蓝牙设备；上传文件返回数据格式通过URL路径获取文件对象，读取文件的数据内容file对象返回数据格式读取bin文件内容，发送给蓝牙设备； 上传文件，根据返回路径，解…...

编程日记 2025/5/16 18:08:29

Paddler负载均衡器

Paddler负载均衡器 Paddler本身是用Go语言编写的，没有直接的Python接口，但可以通过以下方式在Python中使用：执行命令行调用在Python中可以使用 subprocess 模块来调用Paddler的命令行工具，实现负载均衡功能。例如： import subprocessdef start_paddler_agent():com…...

编程日记 2025/5/16 19:26:29

`we_chat_union_id IS NOT NULL` 和 `we_chat_union_id != ‘‘` 这两个条件之间的区别

文章目录 1、什么是空字符串？2、两个引号之间加上空格好的，我们来详细解释一下 we_chat_union_id IS NOT NULL 和 we_chat_union_id ! 这两个条件之间的区别，以及它们在 SQL 查询中的作用： 1. we_chat_union_id IS NOT NULL 含…...

编程日记 2025/5/14 23:29:19

clicbot可立宝编程易错归纳笔记

1、屏幕播放表情模块和等待时间易错点1： (1)等待时间： (a)不是等上一个代码执行完，再执行等待时间，这是错误的。 (b)等待时间上面的代码1刚开始执行，上面的代码2也刚开始执行，不是等到代码1执行完&#xf…...

编程日记 2025/5/16 17:41:59

MySQL 数据”丢失”事件之 binlog 解析应用

事件背景客户反馈在晚间数据跑批后,查询相关表的数据时,发现该表的部分数据在数据库中不存在从应用跑批的日志来看,跑批未报错,且可查到日志中明确显示当时那批数据已插入到数据库中需要帮忙分析这批数据丢失的原因。备注:考虑信息敏感性,以下分析场景测试环境模拟,相关数据…...

编程日记 2025/5/15 9:45:29

基于人工智能时代政务智慧转型的实现前景初探

去年6月，我有幸聆听了由华政公共管理与政治学院精心组织的2019年MPA研究生高端论坛，上午场：由董海军（中共上海市委机构编制委员会办公室处长）主讲的深化机构改革的探索与实践，以及下午场：由束金…...

编程日记 2025/5/12 17:26:06

【论文笔记】Visual Alignment Pre-training for Sign Language Translation

🍎个人主页：小嗷犬的个人主页 🍊个人网站：小嗷犬的技术小站 🥭个人信条：为天地立心，为生民立命，为往圣继绝学，为万世开太平。基本信息标题: Visual Alignment Pre-tra…...

编程日记 2025/5/14 7:59:23

一起学Git【第五节：git版本回退】

git reset 是 Git 版本控制系统中一个非常强大的命令，它可以用来重置当前分支到指定的状态，即执行撤销操作或者回退至之前的某一版本，他可以回退至之前的某一个提交状态。有三种主要的用法：git reset --soft；git reset --hard；git reset --mixed；对比如图： 1.git res…...

编程日记 2025/5/14 21:11:53