renciy/code-box
1
0
Fork 0
mirror of https://github.com/027xiguapi/code-box.git synced 2026-09-27 17:48:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

自定义下载图片

Browse Source
This commit is contained in:
fzk
2024-09-13 10:10:24 +08:00
parent e5edd74e47
commit 1f3db29e5c
11 changed files with 125 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+6 -2
View File
@@ -19,7 +19,7 @@ https://github.com/027xiguapi/code-box
- [Edge网上应用商店](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home?hl=zh-CN)
2. 搜索：`codebox`
![1723513894421.jpg](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/1723513894421.jpg)
![0f8137ce6861f2a387095aef446fe60](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/0f8137ce6861f2a387095aef446fe60.png)
![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/img.png)
![1724640161752](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/1724640161752.jpg)
@@ -64,6 +64,9 @@ https://github.com/027xiguapi/code-box
### 自定义
- 插入自定义样式(css代码)
- 自定义选择下载html
- 自定义选择下载markdown
- 自定义选择下载pdf
### CSDN
@@ -125,7 +128,7 @@ https://github.com/027xiguapi/code-box
- 未登录`php中文网`状态下，不会再出现强制登录弹窗
- 未登录`php中文网`状态下，移动端代码右上角按钮一键复制
![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/8.jpg)
![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/1.jpg)
![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/2.png)
![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/3.jpg)
@@ -141,6 +144,7 @@ https://github.com/027xiguapi/code-box
1. [copy-csdn](https://github.com/openHacking/copy-csdn)
2. [plasmo](https://github.com/PlasmoHQ/plasmo)
3. [Chrome 应用商店一站式支持](https://support.google.com/chrome_webstore/contact/one_stop_support)
4. [开箱即用的web打印和下载](https://juejin.cn/post/7412672713376497727)
## 隐私政策
component/options/custom.tsx
+13
View File
@@ -51,6 +51,12 @@ export default function Custom() {
})
}
function downloadImg() {
sendToContentScript({
name: "custom-downloadImg"
})
}
return (
<fieldset>
<legend>{i18n("customConfig")}</legend>
@@ -104,6 +110,13 @@ export default function Custom() {
</span>
<DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
</div>
<div className="item download" onClick={downloadImg}>
<span>
<StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
{i18n("downloadImg")}
</span>
<DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
</div>
</fieldset>
)
}
contents/custom.tsx
+14
View File
@@ -52,6 +52,10 @@ export default function Custom() {
isSelect = true
isDownloadType = "pdf"
}
if (req.name == "custom-downloadImg") {
isSelect = true
isDownloadType = "img"
}
})
/* 插入自定义css代码 */
@@ -107,6 +111,8 @@ export default function Custom() {
isSelect && downloadMarkdown()
} else if (isDownloadType == "pdf") {
isSelect && downloadPdf()
} else if (isDownloadType == "img") {
isSelect && downloadImg()
}
})
}
@@ -141,5 +147,13 @@ export default function Custom() {
isSelect = false
}
function downloadImg() {
const currentDom = document.querySelector(".codebox-current")
removeCurrentDom()
const img = new Dom2Pdf(currentDom, article.title)
img.downloadImg()
isSelect = false
}
return <div style={{ display: "none" }}></div>
}
locales/en/messages.json
+3
View File
@@ -134,6 +134,9 @@
"downloadPdf": {
"message": "Download PDF"
},
"downloadImg": {
"message": "Download Image"
},
"copyCode": {
"message": "Copy Code"
},
locales/zh_CN/messages.json
+3
View File
@@ -134,6 +134,9 @@
"downloadPdf": {
"message": "下载 PDF"
},
"downloadImg": {
"message": "下载图片"
},
"copyCode": {
"message": "一键复制代码"
},
package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "code-box",
"displayName": "__MSG_extensionName__",
"version": "0.6.5",
"version": "0.6.6",
"description": "__MSG_extensionDescription__",
"author": "027xiguapi. <458813868@qq.com>",
"scripts": {
public/8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

public/app.md
+14 -2
View File
@@ -8,6 +8,13 @@ https://github.com/027xiguapi/code-box
本浏览器插件可以用于CSDN/知乎/脚本之家/博客园/博客园/51CTO博客/php中文网/掘金/微信等网站,一键下载文章成html或markdown文件;实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式.
### 自定义
- 插入自定义样式(css代码)
- 自定义选择下载html
- 自定义选择下载markdown
- 自定义选择下载pdf
### CSDN
1. 一键下载文章html或markdown文件
2. 打开任意一个CSDN博客即可开始复制代码
@@ -17,34 +24,41 @@ https://github.com/027xiguapi/code-box
6. 未关注博主状态下，不再提示关注博主即可阅读全文，且完整展示文章
7. 自动展开代码块
8. 移动端屏蔽跳转APP
### 知乎
1. 一键下载文章html或markdown文件
2. 一键复制代码
3. 未登录知乎状态下，不再提示展开阅读全文，且完整展示文章
4. 未登录知乎状态下，不会再出现强制登录弹窗
### 百度
1. 一键下载对话框html或markdown文件
2. 关闭AI对话框
### 简书
1. 一键下载文章html或markdown文件
2. 一键复制代码
3. 不再提示展开阅读全文，且完整展示文章
4. 不会再出现强制登录弹窗
### 脚本之家
1. 一键下载文章html或markdown文件
2. 打开任意一个脚本之家博客即可开始复制代码
3. 未登录脚本之家状态下，支持选中代码
4. 屏蔽广告
5. 移动端未登录脚本之家状态下，代码右上角按钮一键复制
### 博客园
1. 一键下载文章html或markdown文件
2. 一键复制代码
### 51CTO博客
1. 一键下载文章html或markdown文件
2. 未登录51CTO博客状态下，支持选中代码
3. 未登录51CTO博客状态下，代码右上角按钮一键复制
4. 未登录51CTO博客状态下，不会再出现强制登录弹窗
5. 移动端未登录51CTO博客状态下，代码右上角按钮一键复制
### php中文网
1. 一键下载文章html或markdown文件
2. 未登录php中文网状态下，支持选中代码
@@ -53,8 +67,6 @@ https://github.com/027xiguapi/code-box
5. 未登录php中文网状态下，移动端代码右上角按钮一键复制
## 教你怎么一键下载掘金文章
## 注意事项
public/app.txt
+50 -28
View File
@@ -7,41 +7,63 @@
若有任何问题，请在github上提交issue，评论区不做回复。
github地址：https://github.com/027xiguapi/code-box
自定义
- 插入自定义样式(css代码)
- 自定义选择下载html
- 自定义选择下载markdown
- 自定义选择下载pdf
CSDN
1. 打开任意一个CSDN博客即可开始复制代码
2. 未登录CSDN状态下，支持选中代码
3. 未登录CSDN状态下，代码右上角按钮一键复制
4. 未登录CSDN状态下，不会再出现强制登录弹窗
5. 未关注博主状态下，不再提示关注博主即可阅读全文，且完整展示文章
6. 自动展开代码块
7. 移动端屏蔽跳转APP
1. 一键下载文章html或markdown文件
2. 打开任意一个CSDN博客即可开始复制代码
3. 未登录CSDN状态下，支持选中代码
4. 未登录CSDN状态下，代码右上角按钮一键复制
5. 未登录CSDN状态下，不会再出现强制登录弹窗
6. 未关注博主状态下，不再提示关注博主即可阅读全文，且完整展示文章
7. 自动展开代码块
8. 移动端屏蔽跳转APP
知乎
1. 一键复制代码
2. 未登录知乎状态下，不再提示展开阅读全文，且完整展示文章
3. 未登录知乎状态下，不会再出现强制登录弹窗
1. 一键下载文章html或markdown文件
2. 一键复制代码
3. 未登录知乎状态下，不再提示展开阅读全文，且完整展示文章
4. 未登录知乎状态下，不会再出现强制登录弹窗
百度
1. 关闭AI对话框
1. 一键下载对话框html或markdown文件
2. 关闭AI对话框
简书
1. 一键复制代码
2. 不再提示展开阅读全文，且完整展示文章
3. 不会再出现强制登录弹窗
1. 一键下载文章html或markdown文件
2. 一键复制代码
3. 不再提示展开阅读全文，且完整展示文章
4. 不会再出现强制登录弹窗
脚本之家
1. 打开任意一个脚本之家博客即可开始复制代码
2. 未登录脚本之家状态下，支持选中代码
3. 屏蔽广告
4. 移动端未登录脚本之家状态下，代码右上角按钮一键复制
1. 一键下载文章html或markdown文件
2. 打开任意一个脚本之家博客即可开始复制代码
3. 未登录脚本之家状态下，支持选中代码
4. 屏蔽广告
5. 移动端未登录脚本之家状态下，代码右上角按钮一键复制
博客园
1. 一键复制代码
1. 一键下载文章html或markdown文件
2. 一键复制代码
51CTO博客
1. 未登录51CTO博客状态下，支持选中代码
2. 未登录51CTO博客状态下，代码右上角按钮一键复制
3. 未登录51CTO博客状态下，不会再出现强制登录弹窗
4. 移动端未登录51CTO博客状态下，代码右上角按钮一键复制
php中文网
1. 未登录php中文网状态下，支持选中代码
2. 未登录php中文网状态下，代码右上角按钮一键复制
3. 未登录php中文网状态下，不会再出现强制登录弹窗
4. 未登录php中文网状态下，移动端代码右上角按钮一键复制
1. 一键下载文章html或markdown文件
2. 未登录51CTO博客状态下，支持选中代码
3. 未登录51CTO博客状态下，代码右上角按钮一键复制
4. 未登录51CTO博客状态下，不会再出现强制登录弹窗
5. 移动端未登录51CTO博客状态下，代码右上角按钮一键复制
### php中文网
1. 一键下载文章html或markdown文件
2. 未登录php中文网状态下，支持选中代码
3. 未登录php中文网状态下，代码右上角按钮一键复制
4. 未登录php中文网状态下，不会再出现强制登录弹窗
5. 未登录php中文网状态下，移动端代码右上角按钮一键复制
火狐说明：
public/webstore/0f8137ce6861f2a387095aef446fe60.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

utils/html2Pdf.ts
+21 -6
View File
@@ -1,4 +1,5 @@
import dayjs from "dayjs"
import { saveAs } from "file-saver"
import html2canvas from "html2canvas"
import jsPDF from "jspdf"
@@ -24,12 +25,7 @@ export default class Dom2Pdf {
return new Promise(async (resolve, reject) => {
try {
const canvas = await html2canvas(this._rootDom, {
useCORS: true,
allowTaint: true,
scale: 0.8,
backgroundColor: this._pageBackground
})
const canvas = (await this.getCanvas()) as HTMLCanvasElement
const pdf = new jsPDF("p", "pt", "a4")
let index = 1,
canvas1 = document.createElement("canvas"),
@@ -136,6 +132,17 @@ export default class Dom2Pdf {
})
}
async getCanvas() {
const canvas = await html2canvas(this._rootDom, {
useCORS: true,
allowTaint: true,
scale: 1,
backgroundColor: this._pageBackground
})
return canvas
}
async downloadPdf() {
const newPdf = (await this.savePdf()) as jsPDF
const title = `${this._title}-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.pdf`
@@ -148,4 +155,12 @@ export default class Dom2Pdf {
const pdfUrl = URL.createObjectURL(pdfBlob)
window.open(pdfUrl)
}
async downloadImg() {
const canvas = (await this.getCanvas()) as HTMLCanvasElement
const title = `${this._title}-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.png`
canvas.toBlob(function (blob) {
saveAs(blob, title)
})
}
}