mirror of
https://github.com/langgenius/dify-docs.git
synced 2026-03-26 13:18:34 +07:00
Docs: update favicon
This commit is contained in:
AllenWriter
359
logo/convertor.html
Normal file
359
logo/convertor.html
Normal file
@@ -0,0 +1,359 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SVG to PNG Converter</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.upload-area {
|
||||
border: 3px dashed #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.upload-area:hover {
|
||||
border-color: #0033FF;
|
||||
}
|
||||
.upload-area.dragging {
|
||||
border-color: #0033FF;
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
.upload-area p {
|
||||
margin: 10px 0;
|
||||
color: #666;
|
||||
}
|
||||
.upload-button {
|
||||
padding: 10px 20px;
|
||||
background-color: #0033FF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
.upload-button:hover {
|
||||
background-color: #0028CC;
|
||||
}
|
||||
#fileInput {
|
||||
display: none;
|
||||
}
|
||||
.preview-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.preview-box {
|
||||
border: 2px solid #eee;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fafafa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.preview-box h3 {
|
||||
margin-top: 0;
|
||||
color: #666;
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
input[type="number"] {
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
width: 100px;
|
||||
}
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #0033FF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0028CC;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#svgPreview {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
}
|
||||
#pngPreview {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.info {
|
||||
background-color: #f0f8ff;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.transparent-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.filename {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>SVG to PNG Converter</h1>
|
||||
|
||||
<div class="upload-area" id="uploadArea">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="17 8 12 3 7 8"></polyline>
|
||||
<line x1="12" y1="3" x2="12" y2="15"></line>
|
||||
</svg>
|
||||
<p><strong>Drag & Drop your SVG file here</strong></p>
|
||||
<p>or</p>
|
||||
<button class="upload-button" onclick="document.getElementById('fileInput').click()">Choose File</button>
|
||||
<input type="file" id="fileInput" accept=".svg,image/svg+xml">
|
||||
<p class="filename" id="filename"></p>
|
||||
</div>
|
||||
|
||||
<div class="preview-section hidden" id="previewSection">
|
||||
<div class="preview-box">
|
||||
<h3>Original SVG</h3>
|
||||
<div id="svgPreview"></div>
|
||||
</div>
|
||||
<div class="preview-box">
|
||||
<h3>Converted PNG</h3>
|
||||
<canvas id="pngPreview"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls hidden" id="controlsSection">
|
||||
<label>
|
||||
Width:
|
||||
<input type="number" id="widthInput" value="800" min="1" max="4000">
|
||||
</label>
|
||||
<label>
|
||||
Height:
|
||||
<input type="number" id="heightInput" value="600" min="1" max="4000">
|
||||
</label>
|
||||
<label class="transparent-toggle">
|
||||
<input type="checkbox" id="transparentBg" checked>
|
||||
Transparent Background
|
||||
</label>
|
||||
<button id="convertBtn">Convert to PNG</button>
|
||||
<button id="downloadBtn" disabled>Download PNG</button>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p><strong>How to use:</strong></p>
|
||||
<ul>
|
||||
<li>Drag and drop an SVG file or click to upload</li>
|
||||
<li>Adjust the width and height as needed</li>
|
||||
<li>Choose whether you want a transparent background</li>
|
||||
<li>Click "Convert to PNG" to generate the PNG image</li>
|
||||
<li>Click "Download PNG" to save the converted image</li>
|
||||
</ul>
|
||||
<p><strong>Technical Details:</strong></p>
|
||||
<ul>
|
||||
<li>Conversion happens entirely in your browser using Canvas API</li>
|
||||
<li>SVG (Scalable Vector Graphics) is converted to PNG (Portable Network Graphics)</li>
|
||||
<li>The process: SVG → Image → Canvas → PNG data URL</li>
|
||||
<li>Original aspect ratio can be maintained or changed as needed</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentSvgContent = '';
|
||||
let currentFilename = '';
|
||||
|
||||
const uploadArea = document.getElementById('uploadArea');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const svgPreview = document.getElementById('svgPreview');
|
||||
const canvas = document.getElementById('pngPreview');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const widthInput = document.getElementById('widthInput');
|
||||
const heightInput = document.getElementById('heightInput');
|
||||
const convertBtn = document.getElementById('convertBtn');
|
||||
const downloadBtn = document.getElementById('downloadBtn');
|
||||
const transparentBg = document.getElementById('transparentBg');
|
||||
const previewSection = document.getElementById('previewSection');
|
||||
const controlsSection = document.getElementById('controlsSection');
|
||||
const filenameDisplay = document.getElementById('filename');
|
||||
|
||||
// Drag and drop events
|
||||
uploadArea.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.add('dragging');
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('dragleave', () => {
|
||||
uploadArea.classList.remove('dragging');
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.remove('dragging');
|
||||
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0 && files[0].type === 'image/svg+xml') {
|
||||
handleFile(files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
if (e.target.files.length > 0) {
|
||||
handleFile(e.target.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
function handleFile(file) {
|
||||
if (file.type !== 'image/svg+xml') {
|
||||
alert('Please upload an SVG file');
|
||||
return;
|
||||
}
|
||||
|
||||
currentFilename = file.name.replace('.svg', '');
|
||||
filenameDisplay.textContent = file.name;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
currentSvgContent = e.target.result;
|
||||
displaySvg();
|
||||
previewSection.classList.remove('hidden');
|
||||
controlsSection.classList.remove('hidden');
|
||||
|
||||
// Extract original dimensions
|
||||
const parser = new DOMParser();
|
||||
const svgDoc = parser.parseFromString(currentSvgContent, 'image/svg+xml');
|
||||
const svgElement = svgDoc.querySelector('svg');
|
||||
|
||||
if (svgElement) {
|
||||
const viewBox = svgElement.getAttribute('viewBox');
|
||||
const width = svgElement.getAttribute('width');
|
||||
const height = svgElement.getAttribute('height');
|
||||
|
||||
if (viewBox) {
|
||||
const [, , vbWidth, vbHeight] = viewBox.split(' ').map(Number);
|
||||
widthInput.value = Math.min(vbWidth * 2, 1600);
|
||||
heightInput.value = Math.min(vbHeight * 2, 1600);
|
||||
} else if (width && height) {
|
||||
widthInput.value = parseInt(width) * 2;
|
||||
heightInput.value = parseInt(height) * 2;
|
||||
}
|
||||
}
|
||||
|
||||
convertSvgToPng();
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
function displaySvg() {
|
||||
svgPreview.innerHTML = currentSvgContent;
|
||||
// Ensure SVG fits in preview
|
||||
const svg = svgPreview.querySelector('svg');
|
||||
if (svg) {
|
||||
svg.style.maxWidth = '100%';
|
||||
svg.style.maxHeight = '100%';
|
||||
svg.style.height = 'auto';
|
||||
}
|
||||
}
|
||||
|
||||
convertBtn.addEventListener('click', convertSvgToPng);
|
||||
downloadBtn.addEventListener('click', downloadPng);
|
||||
transparentBg.addEventListener('change', () => {
|
||||
if (currentSvgContent) {
|
||||
convertSvgToPng();
|
||||
}
|
||||
});
|
||||
|
||||
function convertSvgToPng() {
|
||||
const width = parseInt(widthInput.value);
|
||||
const height = parseInt(heightInput.value);
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
const img = new Image();
|
||||
const svgBlob = new Blob([currentSvgContent], { type: 'image/svg+xml' });
|
||||
const url = URL.createObjectURL(svgBlob);
|
||||
|
||||
img.onload = function() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Apply background if not transparent
|
||||
if (!transparentBg.checked) {
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
}
|
||||
|
||||
ctx.drawImage(img, 0, 0, width, height);
|
||||
URL.revokeObjectURL(url);
|
||||
downloadBtn.disabled = false;
|
||||
};
|
||||
|
||||
img.onerror = function() {
|
||||
alert('Error converting SVG. Please check your file.');
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
}
|
||||
|
||||
function downloadPng() {
|
||||
const link = document.createElement('a');
|
||||
link.download = currentFilename + '.png';
|
||||
|
||||
// Canvas toDataURL() creates a PNG by default
|
||||
link.href = canvas.toDataURL('image/png');
|
||||
link.click();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
logo/dify-logo.png
Normal file
BIN
logo/dify-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
23
logo/difyif-logo.svg
Normal file
23
logo/difyif-logo.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #03f;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #fff;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="bg">
|
||||
<circle class="cls-2" cx="12" cy="12" r="12"/>
|
||||
</g>
|
||||
<g id="logo">
|
||||
<g>
|
||||
<path class="cls-1" d="M9.11,8.58c.94,0,1.29-.58,1.29-1.29s-.35-1.29-1.29-1.29-1.29.58-1.29,1.29.35,1.29,1.29,1.29Z"/>
|
||||
<path class="cls-1" d="M13.64,8.86v.83h-2.12v1.85h2.12v4.62h-3.51v-6.46s0,0,0,0h-4.62v1.85h2.58v4.62h-3.05v1.85h13.85v-1.85h-3.23v-4.62h3.23v-1.85h-3.23v-1.85h3.23v-1.85h-2.4c-1.58,0-2.86,1.28-2.86,2.86Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 687 B |
Reference in New Issue
Block a user