tag html2canvas

標籤
貢獻11
21
05:56 PM · Nov 23 ,2025
hanbo_bo 頭像 like_5af2bb418652b 頭像 ddup365 頭像 chouchou_5f11814d4719d 頭像 tanking 頭像 wangji_5d01acdfdd139 頭像 dyisheng 頭像 mingweiweim 頭像 yinjiaodawang_59c4e2e490f3d 頭像 piscdong 頭像 donglegend 頭像

@html2canvas / 博客 RSS 訂閱

hanbo_bo 頭像

hanbo_bo - 將html頁面轉成圖片（html2canvas）

使用插件html2canvas 官網：https://html2canvas.cn/html2canvas-getStart.html 案例： import { onMounted } from "vue" import { RouterView } from 'vue-router' import html2canvas from 'html2canvas' onMounted(

html2canvas

收藏 評論

like_5af2bb418652b 頭像

like - JS下載圖片的方法總結

有沒有小夥伴在開發“純前端下載圖片”功能時，遇到以下的場景？ 1. 下載已存在的圖片 2. 下載某個元素的內容 分享解決以上問題的方法 下載已存在的圖片：使用canvas畫圖，a標籤下載 export function downloadImg(imgUrl: string, imgTitle: string) { var img = new Image(); img.src = im

download , html2canvas , 前端 , Javascript

收藏 評論

ddup365 頭像

specialcoder - 前端截圖實現

前言 需求背景： 目標：將頁面內容變成圖片分享出去 持久化：不需要服務端存儲 客户端能力：不依賴客户端端能力 使用pupeteer做截圖服務 優點： 前端使用簡單，只需調用接口即可 分享頁面可以和給用户展示的頁面內容分離，不用額外處理樣式等問題 缺點： 新開服務維護服務 接口響應時間較長會影響體驗 結論 調研發現，可以使用html2canvas純前端做頁面轉化成圖片的功能

html2canvas , html5 , Web

收藏 評論

chouchou_5f11814d4719d 頭像

臭臭? - 解決 圖片太多截圖不全 問題 html2canvas dom-to-image jspdf

首先我需要截圖的demo圖片很多很多,當我使用html2canvas轉的時候總是有一部分沒有截上，我上網上找了幾個辦法，都沒有解決，就很狗血無語，， gitlab上好像沒有一直沒有回覆 最後我是使用的dom-to-image插件解決的 搭配jspdf 沖沖衝 順便問一下 有將頁面轉為pdf的功能嗎 不轉為canvas圖片 就是直接dom元素和樣式生成為pdf 可編輯

react , pdf , html2canvas

收藏 評論

tanking 頭像

TANKING - html2canvas將指定區域導出為圖片（js將div導出為圖片）

如何使用JS截取HTML頁面為圖片呢，html2canvas.js這個插件可以輕鬆實現。這個原理很簡單，就是html2canvas.js可以將當頁面渲染成一個Canvas圖片，然後保存下來即可。它不需要來自服務器任何渲染，整張圖片都是在客户端瀏覽器創建。 代碼 !DOCTYPE html html head meta charset="utf-8" meta http-equiv="X-

html2canvas , canvas , HTML , 前端 , Javascript

收藏 評論

wangji_5d01acdfdd139 頭像

望記 - html2canvas生成海報白邊以及文字被遮擋問題

1. 如何在vue3中使用html2canvas npm install --save html2canvas 生成海報： template div class="poster-box" ref="posterBox" div class="thumb"img src="@assets/goods.jpg" alt=""/div div class="

html2canvas , vue3 , 前端

收藏 評論

dyisheng 頭像

D一生 - html2canvas常見踩坑問題

一、html2canvas圖片留白 圖片留白的問題應該是頁面有滾動條，所以導致截屏又留白，解決方式有兩種： 1. 將頁面window.scrollTo(0,0)這樣可以解決，但是有的時候滾動會讓用户看到，體驗不好，所以，我們可以看下另外一種方式 2. 設置參數 this.$html2canvas(document.getElementById('attack'),{sc

css3 , html2canvas , Css , Javascript

收藏 評論

mingweiweim 頭像

明未為洺 - vue導出pdf

vue中實現頁面導出pdf的功能 所需插件 html2canvas和pdfmake 原理就是將頁面截圖，然後生成pdf文件，具體代碼如下 const main = ref() async function exportPdf() { const canvas = await html2canvas(main.value, { allowTaint: true, scal

vue.js , pdfmake , html2canvas , vue3

收藏 評論

yinjiaodawang_59c4e2e490f3d 頭像

sdfsdf - 前端生成海報

前端截圖 前端生成海報 保存圖片 內容為div 通過html2canvas截圖 生成Bob | base64 保存到本地(下載方法無法下載,生成圖片長按保存到本地) style * { margin: 0; padding: 0; list-style: none; } .view

html2canvas , 前端

收藏 評論

piscdong 頭像

祺爸 - 小程序（網頁）中實現頁面截圖

最近接到一個需求，需要在小程序中實現頁面截圖，我一開始的考慮是使用官方提供的擴展組件wxml-to-canvas，但是實際體驗下來效果很糟糕，首先它並不能截取實際的頁面，而是必須傳入wxml和wxss；然後他能支持的效果也很少，並不能滿足需求中稍微複雜的效果。最終我決定用web-view加載的網頁中使用html2canvas來實現功能。 實際代碼 網頁部分我用了vue，首先需要安裝html2can

小程序 , html2canvas

收藏 評論

donglegend 頭像

donglegend - javascript實現網頁截圖導出方案

前言 網頁截圖導出不是一個非常高頻的需求，但時不時的也會遇到。這裏總結一下系統的解決方案，然後從中選擇合適自己的。 截圖導出可以看到是兩個功能，第一步實現截圖，第二步實現導出也就是下載能力。 截圖實現 首先，我們必須明白正常javascript是運行在瀏覽器裏的，本身沒有截圖的能力。所以要想實現截圖，必須通過其他迂迴方案實現，廢話少説，直接上結論。 前端方案1 canvas 代表庫html2can

puppeteer , download , html2canvas

收藏 評論