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

前端canvas对象转成file对象

import html2canvas from 'html2canvas'export default {methods: {//canvas对象转成file对象canvasToFile() {html2canvas(this.$parent.$refs['mapPanel'].$el,{width: this.$parent.$refs['mapPanel'].$el.clientWidth - 600// height:''}).then(canvas => {const base64Data = canvas.toDataURL('image/png')const blob = this.base64ToBlob(base64Data)// 1000到10000的随机整数(四位数)let fileName = Math.floor((Math.random() * (10000 - 1000))) + 1000 fileName += '_'+this.form.markName + '.png'// 将Blob对象转换为File对象const file = new File([blob], fileName, { type: 'image/png' })})},// Base64字符串转换为二进制数据base64ToBlob(base64Data) {let byteString = base64Dataif (base64Data.split(',')[0].indexOf('base64') >= 0) {byteString = atob(base64Data.split(',')[1]) // base64 解码} else {byteString = unescape(base64Data.split(',')[1])}// 获取文件类型const mimeString = base64Data.split(';')[0].split(':')[1] // mime类型// ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区// let arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组// let uintArr = new Uint8Array(arrayBuffer) // 创建视图const uintArr = new Uint8Array(byteString.length) // 创建视图for (let i = 0; i < byteString.length; i += 1) {uintArr[i] = byteString.charCodeAt(i)}// 生成blobconst blob = new Blob([uintArr], {type: mimeString})// 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上return blob}}}

详细内容:https://docs.pingcode.com/baike/2237480

相关文章:

前端canvas对象转成file对象

import html2canvas from html2canvasexport default {methods: {//canvas对象转成file对象canvasToFile() {html2canvas(this.$parent.$refs[mapPanel].$el,{width: this.$parent.$refs[mapPanel].$el.clientWidth - 600// height:}).then(canvas > {const base64Data can…...

mermaid大全(语法、流程图、时序图、甘特图、饼图、用户旅行图、类图)

⚠️ 有些网站的mermaid可能不完整&#xff0c;因此下面教程中可能有些语法是无效的。 &#x1f60a;亲测Typora软件均可以显示。 1. 介绍 Mermaid是一个基于JavaScript的图表绘制工具&#xff0c;它使用类似Markdown的语法来创建和修改各种类型的图表。以下是关于Mermaid的详…...

运行fastGPT 第四步 配置ONE API 添加模型

上次已经装好了所有的依赖和程序。 下面在网页中配置One API &#xff0c;这个是大模型的接口。配置好了之后&#xff0c;就可以配置fastGPT了。 打开 OneAPI 页面 添加模型 这里要添加具体的付费模型的API接口填进来。 可以通过ip:3001访问OneAPI后台&#xff0c;**默认账号…...

Spring Initializr创建springboot项目 “java: 错误: 无效的源发行版:19”

我用的1.8的jdk&#xff0c;排查发现这是jdk和springboot版本冲突导致的。 1、File->Project Structure->Project Settings->Project,把language level改成相应的版本 2、File->Project Structure->Module&#xff0c;source和dependancies改成相应的版本 3、F…...

Java IDEA中Gutter Icons图标的含义

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 前言&#xff1a; 很多人刚开始用IDEA来学习编程&#xff0c;会发现下面这些图标。 但是…...

如何进行域名跳转与域名重定向的综合指南

文章摘取于 Dynadot官方博客内容。 在访问一些商业网站时&#xff0c;我们通常会发现这些平台会将多个域名都指向到同一个内容界面。当然&#xff0c;也存在网站迁移到新域名&#xff0c;旧域名则指向新域名以及其内容页面的情况。 这两者实际上都属于域名跳转的范畴&#xff…...

YOLOv10-1.1部分代码阅读笔记-build.py

build.py ultralytics\data\build.py 目录 build.py 1.所需的库和模块 2.class InfiniteDataLoader(dataloader.DataLoader): 3.class _RepeatSampler: 4.def seed_worker(worker_id): 5.def build_yolo_dataset(cfg, img_path, batch, data, mode"train"…...

redux 结合 @reduxjs/toolkit 的使用

1&#xff0c;使用步骤 使用React Toolkit 创建 counterStore&#xff08;store目录下&#xff09; --> 为React注入store&#xff08;src下面的index&#xff09; --> React组件使用store中的数据&#xff08;组件&#xff09; 2&#xff0c;例如下面有一个简单加减的…...

tui-editor报错

原因&#xff1a; 原先的tui-editor插件&#xff08;富文本编辑器插件&#xff09;换了个名称&#xff0c;现在已经更名为toast-ui/editor因此安装不了&#xff0c;从而报错&#xff01; 解决&#xff1a; 1.首先将package.json中的tui-editor那一行修改为 "toast-ui/…...

运行fastGPT 第二步 安装宝塔面板 用于管理安装docker和其文件

if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec 上面运行以下&#xff0c;安装宝塔。如果不行&#xff0c;系…...

常见好用的PHP CMS开源系统有哪些?

开源的系统&#xff0c;网站大家估计也见过很多&#xff0c;尤其是用PHP写的开源系统也很受用户们欢迎&#xff0c;这类系统通常以简单、使用、开源为优势&#xff0c;为用户提供更好的服务。以下就为大家介绍几个常见且好用的PHP CMS开源系统。欢迎补充&#xff01; 1、WordP…...

【排错记录】免密、nginx、cgroup、sshd

1、免密登录回显很慢。 现象&#xff1a; 免密登录超级慢&#xff0c;而且巡检脚本跑不起来 解决&#xff1a; vi /etc/ssh/sshd_configGSSAPIAuthentication no UseDNS nosystemctl restart sshd2、nginx服务起不来 现象&#xff1a; Redirecting to /bin/systemctl rest…...

浅谈云计算19 | OpenStack管理模块 (上)

OpenStack管理模块&#xff08;上&#xff09; 一、操作界面管理架构二、认证管理2.1 定义与作用2.2 认证原理与流程2.2.1 认证机制原理2.2.2 用户认证流程 三、镜像管理3.1 定义与功能3.2 镜像服务架构3.3 工作原理与流程3.3.1 镜像存储原理3.3.2 镜像检索流程 四、计算管理4.…...

LabVIEW 程序中的 R6025 错误

R6025错误 通常是 运行时库 错误&#xff0c;特别是与 C 运行时库 相关。这种错误通常会在程序运行时出现&#xff0c;尤其是在使用 C 编译的程序或依赖 C 运行时库的程序时。 ​ 可能的原因&#xff1a; 内存访问冲突&#xff1a; R6025 错误通常是由于程序在运行时访问无效内…...

【认识油管头部频道】ep5 “5-Minute Crafts”——DIY 和生活技巧

5-Minute Crafts 是一个非常受欢迎的 DIY 和生活技巧频道&#xff0c;它的火爆有多方面的原因&#xff1a; 1. 简单实用的内容 视频主要以解决日常生活中遇到的小问题为主&#xff0c;提供简单易学的技巧&#xff0c;吸引了想快速获取实用知识的观众。 2. 短视频形式 每个视…...

HarmonyOS应用开发者初级认证最新版– 2025/1/13号题库新版

1.欢迎各位读者&#xff0c;本文档来自鸿蒙开发学员亲测&#xff0c;最新版。&#xff08;考试时直接Ctrlf进行搜索&#xff0c;一定要认真比对答案&#xff0c;有的答案相似度很高&#xff09;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 欢迎…...

improve-gantt-elastic(vue2中甘特图实现与引入)

1.前言 项目开发中需要使用甘特图展示项目实施进度&#xff0c;左侧为表格计划&#xff0c;右侧为图表进度展示。wl-gantt-mater&#xff0c;dhtmlx尝试使用过可拓展性受到限制。gantt-elastic相对简单&#xff0c;可操作性强&#xff0c;基础版本免费。 甘特图&#xff08;Gan…...

【k8s面试题2025】1、练气期

主要通过呼吸吐纳等方法&#xff0c;将外界的天地灵气吸入体内&#xff0c;初步改造身体&#xff0c;使身体素质远超常人。 文章目录 docker 和虚拟机的不同Kubernetes 和 docker 的关系Kube-proxy IPVS 和 iptables 的异同蓝绿发布Kubernetes中常见的数据持久化方式关于 Docke…...

SpringBoot源码解析(七):应用上下文结构体系

SpringBoot源码系列文章 SpringBoot源码解析(一)&#xff1a;SpringApplication构造方法 SpringBoot源码解析(二)&#xff1a;引导上下文DefaultBootstrapContext SpringBoot源码解析(三)&#xff1a;启动开始阶段 SpringBoot源码解析(四)&#xff1a;解析应用参数args Sp…...

SpringSecurity-前后端分离

在前后端分离的架构中&#xff0c;Spring Security 的配置与传统的单体应用有所不同。为了确保安全性和灵活性&#xff0c;我们需要对 Spring Security 进行适当的调整以适应这种架构。下面将详细介绍如何在前后端分离的应用程序中实现 Spring Security。 1. 理解前后端分离的…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...