134 lines
4.1 KiB
Markdown
134 lines
4.1 KiB
Markdown
# DFD.html to PNG Conversion Guide
|
|
|
|
## Overview
|
|
This document provides instructions for converting the DFD.html file to a PNG image.
|
|
|
|
## File Information
|
|
- **Input file**: `/Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/ai/ai7/ai7-m3/Thesis materials/DFD.html`
|
|
- **Expected output**: `DFD.png` in the same directory
|
|
|
|
## Method 1: Using Command Line Tools
|
|
|
|
### Option A: Using wkhtmltopdf
|
|
1. Install wkhtmltopdf:
|
|
```bash
|
|
# On macOS
|
|
brew install wkhtmltopdf
|
|
|
|
# On Ubuntu/Debian
|
|
sudo apt-get install wkhtmltopdf
|
|
```
|
|
|
|
2. Convert HTML to PNG:
|
|
```bash
|
|
wkhtmltoimage --width 1200 --height 800 "/Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/ai/ai7/ai7-m3/Thesis materials/DFD.html" "/Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/ai/ai7/ai7-m3/Thesis materials/DFD.png"
|
|
```
|
|
|
|
### Option B: Using Puppeteer (Node.js)
|
|
1. Install Node.js and npm if not already installed
|
|
2. Install Puppeteer:
|
|
```bash
|
|
npm install puppeteer
|
|
```
|
|
|
|
3. Create a conversion script:
|
|
```javascript
|
|
const puppeteer = require('puppeteer');
|
|
const fs = require('fs');
|
|
|
|
(async () => {
|
|
const browser = await puppeteer.launch();
|
|
const page = await browser.newPage();
|
|
|
|
// Read the HTML file
|
|
const htmlContent = fs.readFileSync('/Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/ai/ai7/ai7-m3/Thesis materials/DFD.html', 'utf8');
|
|
|
|
await page.setContent(htmlContent);
|
|
|
|
// Take screenshot
|
|
await page.screenshot({
|
|
path: '/Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/ai/ai7/ai7-m3/Thesis materials/DFD.png',
|
|
fullPage: true
|
|
});
|
|
|
|
await browser.close();
|
|
console.log('Conversion completed!');
|
|
})();
|
|
```
|
|
|
|
## Method 2: Using Python Libraries
|
|
|
|
### Option A: Using Selenium
|
|
1. Install required packages:
|
|
```bash
|
|
pip install selenium
|
|
```
|
|
|
|
2. Make sure you have ChromeDriver installed
|
|
|
|
3. Run the following script:
|
|
```python
|
|
from selenium import webdriver
|
|
from selenium.webdriver.chrome.options import Options
|
|
import os
|
|
|
|
# Setup Chrome options
|
|
chrome_options = Options()
|
|
chrome_options.add_argument("--headless") # Run in background
|
|
chrome_options.add_argument("--no-sandbox")
|
|
chrome_options.add_argument("--disable-dev-shm-usage")
|
|
|
|
# Initialize the driver
|
|
driver = webdriver.Chrome(options=chrome_options)
|
|
|
|
# Load the HTML file
|
|
file_url = "file://" + os.path.abspath("/Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/ai/ai7/ai7-m3/Thesis materials/DFD.html")
|
|
driver.get(file_url)
|
|
|
|
# Set window size and take screenshot
|
|
driver.set_window_size(1200, 800)
|
|
driver.save_screenshot("/Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/ai/ai7/ai7-m3/Thesis materials/DFD.png")
|
|
|
|
driver.quit()
|
|
print("Conversion completed!")
|
|
```
|
|
|
|
### Option B: Using Playwright
|
|
1. Install required packages:
|
|
```bash
|
|
pip install playwright
|
|
playwright install chromium
|
|
```
|
|
|
|
2. Run the following script:
|
|
```python
|
|
from playwright.sync_api import sync_playwright
|
|
import os
|
|
|
|
with sync_playwright() as p:
|
|
browser = p.chromium.launch(headless=True)
|
|
page = browser.new_page()
|
|
|
|
# Load the HTML file
|
|
file_path = os.path.abspath("/Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/ai/ai7/ai7-m3/Thesis materials/DFD.html")
|
|
page.goto(f"file://{file_path}")
|
|
|
|
# Set viewport size and take screenshot
|
|
page.set_viewport_size({"width": 1200, "height": 800})
|
|
page.screenshot(path="/Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/ai/ai7/ai7-m3/Thesis materials/DFD.png", full_page=True)
|
|
|
|
browser.close()
|
|
print("Conversion completed!")
|
|
```
|
|
|
|
## Method 3: Manual Conversion
|
|
1. Open the DFD.html file in your web browser
|
|
2. Take a screenshot of the page (using Cmd+Shift+4 on macOS or PrtScn on Windows)
|
|
3. Crop the screenshot to include only the relevant content
|
|
4. Save the image as DFD.png in the Thesis materials directory
|
|
|
|
## Verification
|
|
After conversion, verify that:
|
|
- The PNG file exists in the Thesis materials directory
|
|
- The image clearly displays the content from the DFD.html file
|
|
- The image quality is sufficient for your needs |