html2canvas相關(生成圖片)

根據?DOM?生成對應的圖片

function?export3png(row, type?= null) {

? html2canvas(

? ? ?document.querySelector('#bug'),?//要生成圖片的dom節點

{useCORS:?true, })??圖片跨域

.then((canvas) =>?{

? ? const?saveUrl?= canvas.toDataURL('image/png')??

Canvas對象生成base64代碼

const?a_label?= document.createElement('a')

重新創建一個a標簽的dom節點

document.body.appendChild(a_label)

將這個節點追加到body中

a_label.href?= saveUrl

追加到設置url為base64,如果設置錯了就不是下載了 ,而是重開一個標簽查看圖片

a_label.download?='9999'?

追加到設置下載下來的文件名稱

a_label.click()

追加到關鍵,瀏覽器下載到本地

? })

}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/37859.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/37859.shtml
英文地址,請注明出處:http://en.pswp.cn/web/37859.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

MNIST手寫字體識別(算法基礎)

快教程 10分鐘入門神經網絡 PyTorch 手寫數字識別 慢教程 【深度學習Pytorch入門】 簡單回歸問題-1 梯度下降算法 梯度下降算法 l o s s x 2 ? s i n ( x ) loss x^2 * sin(x) lossx2?sin(x) 求導得: f ‘ ( x ) 2 x s i n x x 2 c o s x f^(x)2xsinx x^…

uORF和non-overlap對翻譯效率的影響

以下是重疊和非重疊上游開放閱讀框(uORFs)對翻譯效率影響的總結: 重疊uORFs: 重疊uORFs對主要編碼區的翻譯影響更為顯著,因為它們直接與下游編碼序列(CDSs)競爭核糖體結合。重疊uORFs的翻譯起始…

在C++程序中嵌入quickjs實現C++和javascript互相調用

quickjs是一個C實現的輕量級javascript解析引擎,可以嵌入到C程序中,實現C和js代碼的交互。 以下基于quickjs-ng這一社區分支實現樣例代碼演示利用quickjs編寫程序進行C和js互相調用,支持linux和windows。 代碼結構 quickjs_demo- quickjs-…

Cesium大屏-vue3注冊全局組件

1.需求 說明:產品經理要求開發人員在地圖大屏上面隨意放置組件,并且需要通過數據庫更改其組件大小,位置等;適用于大屏組件中場站視角、任意位置標題等。 2.實現 2.1GlobalComponents.vue 說明:containerList可以通…

python基礎語法 004-2流程控制- for遍歷

1 遍歷 1.1 什么是遍歷? 可以遍歷的元素:字符串、列表、元組、字典、集合字符串是可以進行for 循環。(容器對象,序列)可迭代對象iterable 例子: 1 )、for遍歷字符串: name xiao…

RK3568驅動指南|第十五篇 I2C-第167章 I2C上拉電阻

瑞芯微RK3568芯片是一款定位中高端的通用型SOC,采用22nm制程工藝,搭載一顆四核Cortex-A55處理器和Mali G52 2EE 圖形處理器。RK3568 支持4K 解碼和 1080P 編碼,支持SATA/PCIE/USB3.0 外圍接口。RK3568內置獨立NPU,可用于輕量級人工…

SpringBoot實現圖片添加水印

提示&#xff1a;今日完成圖片添加水印功能 后續可能還會繼續完善這個功能 文章目錄 目錄 文章目錄 前端部分 后端 Xml Controller層 Sercive層 Service實現層 Config配置層 application.properties 文件后綴名獲取 常量定義 前端部分 <!DOCTYPE html> <htm…

WIN11,如何同時連接有線網絡與WLAN無線網絡

之前寫了兩篇文章&#xff0c;一篇是雙網卡多網卡時win11如何設置網卡優先級_多網卡設置網卡優先級-CSDN博客 另一篇是win11 以太網和WLAN沖突 連接網線時導致WiFi掉線 解決_win11 以太網和wifi不能同時生效-CSDN博客 這篇是對上面兩篇的補充&#xff1a;主要解決電腦重啟后&…

語音芯片TD5580,USB小音響芯片—拓達半導體

有時候電腦的聲卡會出現損壞的問題&#xff0c;給我們的生活帶來了很多麻煩。這時候&#xff0c;我們就需要一款方便易用的產品來解決聲卡問題。USB聲卡小音響就是為了解決這個問題而設計的一款便捷的產品。它不僅可以作為一個小音響&#xff0c;讓您在工作和娛樂的時候享受高品…

docker-compose搭建minio對象存儲服務器

docker-compose搭建minio對象存儲服務器 最近想使用oss對象存儲進行用戶圖片上傳的管理&#xff0c;了解了一下例如aliyun或者騰訊云的oss對象存儲服務&#xff0c;但是呢涉及到對象存儲以及經費有限的緣故&#xff0c;決定自己手動搭建一個oss對象存儲服務器&#xff1b; 首先…

燒結銀到底有多牛?歡迎咨詢SHAREX善仁新材研究院

燒結銀到底有多牛&#xff1f;歡迎咨詢SHAREX善仁新材研究院 在當今日新月異的科技浪潮中&#xff0c;材料科學以其獨特的魅力引領著人類探索未知領域的步伐。在眾多前沿材料中&#xff0c;燒結銀憑借其卓越的性能和廣泛的應用前景&#xff0c;逐漸嶄露頭角&#xff0c;成為科…

創建XCOM窗體和跳轉連接

Xcom 窗體&#xff1a; (groupBox組合框&#xff0c;comboBox下拉框) xcom代碼&#xff1a; namespace _01_作業 {// 1kb 1024B 1200B// 1MB public partial class Form1 : Form{public List<string> botelv new List<string> { "600","1200&…

Unix Network Programming Episode 96

‘socketpair’ Function The socketpair function creates two sockets that are then connected together. This function applies only to Unix domain sockets. #include <sys/socket.h> int socketpair(int family, int type, int protocol, int sockfd[2]);POSIX…

(十七)如何學習統計學基礎知識(學習路線)

統計學是數據科學的基本支柱。統計學的目的是幫助你理解數據并從中得出有意義的結論。在數據科學中&#xff0c;統計學在理解數據模式和趨勢、做出預測和檢驗假設方面起著至關重要的作用。 (一) 數據科學統計學習路線圖 本文為學習統計學并將其應用于數據科學提供了清晰、結構化…

如何使用 SPM 插件從 Pkl 配置文件生成 Swift 接口

文章目錄 前言示例展示 Pkl 配置生成 Swift 綁定手動安裝和使用 pkl-gen-swift創建 SPM 命令插件加載 Pkl 配置總結前言 Pkl(全稱為 Pickle)是蘋果推出的一種全新的專用于配置的編程語言。它允許開發人員通過類型和內置驗證安全、直觀地設計數據模型。 作為蘋果語言,Pkl 有…

Python容器 之 列表--下標和切片

列表的切片 得到是 新的列表字符串的切片 得到是 新的字符串 如果下標 不存在會報錯 list1 [1, 3.14, "hello", False] print(list1)# 獲取 列表中 第一個數據 print(list1[0]) # 1# 獲取列表中的最后一個數據 print(list1[-1]) # [False]# 獲取中間兩個數 即 3.1…

3.2ui功能講解之graph頁面

本節重點介紹 : graph頁面target頁面flags頁面status頁面tsdb-status頁面 訪問地址 $ip:9090 graph頁面 autocomplete 可以補全metrics tag信息或者 內置的關鍵字 &#xff0c;如sum聚合函數table查詢 instante查詢&#xff0c; 一個點的查詢graph查詢調整分辨率 resolutio…

記錄:有趣的C#多元運算符 ? : 表達式寫法

有時候用 if //...Whatre you she wanna go else if //...do do do else //...and i know something just like this... 感覺代碼太多了怎么優雅的、高端的替換&#xff1f; 看個高端的栗子菊&#xff1a; LedCOM["parity"] ledData[4] "N" ? …

Study--Oracle-05-Oracler體系結構

一、oracle 體系概覽 Oracle數據庫的體系結構通常包括以下主要組件&#xff1a; 1、實例&#xff08;Instance&#xff09;&#xff1a;運行數據庫的軟件環境&#xff0c;包括內存結構&#xff08;SGA&#xff09;和進程結構&#xff08;Background Processes and User Proces…

Django 一對多關系

1&#xff0c;創建 Django 應用 Test/app9 django-admin startapp app9 2&#xff0c;注冊應用 Test/Test/settings.py 3&#xff0c;添加應用路由 Test/Test/urls.py from django.contrib import admin from django.urls import path, includeurlpatterns [path(admin/,…