# html-to-image

**Repository Path**: niejiang/html-to-image

## Basic Information

- **Project Name**: html-to-image
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-24
- **Last Updated**: 2025-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 元素截图下载器插件开发实录

## 项目背景

在日常网页使用和前端开发过程中，经常会遇到需要对网页中某个特定元素（如某个div、图片、表格等）进行截图并保存为图片的需求。手动截图不仅繁琐，而且难以精准选中目标元素。为此，开发了这款基于Chrome的浏览器插件——元素截图下载器，帮助用户一键截图任意网页元素并自动下载图片。

## 插件功能

- 右键任意网页元素，选择“截图此元素”即可自动生成并下载该元素的图片。
- 支持网页暗色/亮色模式，截图背景与实际页面一致。
- 截图前自动高亮显示目标元素范围，所见即所得。
- 支持绝大多数常见网页内容（文本、图片、表格、按钮等）。

## 实现思路

1. **右键菜单**：通过Chrome扩展API注册右键菜单项。
2. **内容脚本注入**：自动在所有网页注入content.js和dom-to-image.min.js，实现元素捕获和截图。
3. **元素高亮**：右键时为目标元素添加高亮边框，截图后自动移除。
4. **截图与下载**：使用dom-to-image库将目标元素渲染为图片，并自动触发下载。
5. **兼容性处理**：自动获取页面背景色，保证截图背景与实际一致。

## 关键代码片段

### manifest.json
```json
{
  "manifest_version": 3,
  "name": "元素截图下载器",
  "version": "1.0",
  "description": "为指定元素截图并下载图片",
  "permissions": [
    "contextMenus",
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["dom-to-image.min.js", "content.js"]
    }
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}
```

### background.js
```js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "screenshot-element",
    title: "截图此元素",
    contexts: ["all"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "screenshot-element") {
    chrome.tabs.sendMessage(tab.id, { action: "screenshot-element" });
  }
});
```

### content.js（核心逻辑）
```js
console.log("content.js loaded");
let lastElement = null;
let highlightClass = "html-to-image-highlight";

document.addEventListener("contextmenu", function (e) {
  // 移除上一个高亮
  if (lastElement && lastElement.classList) {
    lastElement.classList.remove(highlightClass);
  }
  lastElement = e.target;
  // 添加高亮
  if (lastElement && lastElement.classList) {
    lastElement.classList.add(highlightClass);
  }
}, true);

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "screenshot-element" && lastElement) {
    const bgColor = window.getComputedStyle(document.body).backgroundColor || "#000";
    domtoimage.toPng(lastElement, { backgroundColor: bgColor })
      .then(function (dataUrl) {
        // 移除高亮
        if (lastElement && lastElement.classList) {
          lastElement.classList.remove(highlightClass);
        }
        const link = document.createElement('a');
        link.download = 'element.png';
        link.href = dataUrl;
        link.click();
      })
      .catch(function (error) {
        alert('截图失败: ' + error);
        // 移除高亮
        if (lastElement && lastElement.classList) {
          lastElement.classList.remove(highlightClass);
        }
      });
  }
});

// 插入高亮样式
const style = document.createElement('style');
style.innerHTML = `
.html-to-image-highlight {
  outline: 3px solid #ff5252 !important;
  box-shadow: 0 0 0 4px rgba(255,82,82,0.2) !important;
  transition: outline 0.2s, box-shadow 0.2s;
  z-index: 999999 !important;
}
`;
document.head.appendChild(style);
```

## 常见问题与解决方案

### 1. 截图图片渲染不出来？
- 主要原因是图片跨域（CORS）限制，外链图片如果没有允许跨域，浏览器不会允许脚本读取，截图时会变成空白。
- 解决方法：尽量使用同源图片或带CORS头的图片，或为domtoimage增加crossOrigin参数（但服务器不支持CORS时无效）。

### 2. 背景颜色不一致？
- 插件已自动获取页面背景色，保证截图背景与实际一致。

### 3. 如何看到截图范围？
- 插件已实现右键时高亮显示目标元素，截图前可清晰看到范围。

## 使用方法

1. 打开Chrome浏览器，进入 `chrome://extensions/`。
2. 开启“开发者模式”，点击“加载已解压的扩展程序”，选择 `html-to-image` 文件夹。
3. 在任意网页右键你想截图的元素，选择“截图此元素”。
4. 稍等片刻，图片会自动下载到本地。

## 项目总结

本插件极大提升了网页元素截图的效率和体验，适合前端开发、产品经理、内容创作者等各类用户。后续可扩展自定义文件名、图片格式、批量截图等功能。

---

如需源码或定制开发，欢迎联系作者！