SVGcode, JPG, PNG, GIF, WebP, AVIF vb. kafes resimleri, SVG biçimindeki vektör grafiklerine dönüştürmenizi sağlayan bir Progresif Web Uygulamasıdır. File System Access API, Eş Zamansız Pano API'si, File handling API'yi ve Window Controls Overlay özelleştirmeyi kullanır.
Kafesten vektöre
Bir resmi ölçeklendirdikten sonra sonucun pikselleştirilmiş ve tatmin edici olmadığı oldu mu? Eğer Bu nedenle, muhtemelen WebP, PNG veya JPG gibi bir kafes resim biçimiyle uğraştınız.
Öte yandan, vektör grafikleri, bir koordinat sistemindeki noktalarla tanımlanan görüntülerdir. Bu noktaların çizgilerle ve eğrilerle birbirine bağlanarak poligonlar ve başka şekiller oluşturması sağlanır. Vektör grafiklerinde bir herhangi bir çözünürlüğe yükseltilmesi veya düşürülmesi açısından kafes grafiklere göre daha avantajlı olmadan çalışır.
SVGcode tanıtımı
SVGcode adlı bir PWA oluşturdum. Bu PWA, kafes resimleri yardımcı olabilir. Kredinin verilmesi gereken kredi: Bunu ben icat etmedim. SVGcode ile Potrace adlı bir komut satırı aracının Peter Selinger'dan Web Derlemesi'ne dönüştürülerek Web uygulaması.
SVG kodunu kullanma
İlk olarak size uygulamayı nasıl kullanacağınızı göstermek istiyorum. Chrome Geliştirici Zirvesi'nin tanıtım resmiyle başlıyorum ChromiumDev Twitter kanalından indirdiğim bir video. Bu bir PNG kafes resmidir. Görüntüyü SVGcode uygulamasına sürükleyin. Dosyayı bıraktığımda uygulama, resmin rengini renklerle girişin vektörel sürümü görüntüleninceye kadar devam eder. Şimdi resmi yakınlaştırabiliyorum ve gördüğünüz gibi kenarlar keskin kalır. Ancak Chrome logosunu yakınlaştırdığınızda, görüntünün özellikle de logonun dış çizgileri biraz benekli görünüyor. Sonuçları iyileştirmek için örneğin, beş piksele kadar olan benekleri bastırarak izlemede tekilleşmeyi giderir.
SVGcode'da Posterizasyon
Vektörleştirme için, özellikle fotografik resimlerde önemli bir adım, girdiye poster eklemektir. resmi kullanabilirsiniz. SVGcode, bunu her renk kanalı için yapmamı sağlıyor ve SVG'yi seçeceğim. Sonuçtan memnun olduğumda SVG'yi sabit diskime kaydedebilirim. ve istediğim yerde kullanabiliyorum.
SVGcode'da kullanılan API'ler
Artık uygulamanın neler yapabildiğini gördünüz. size yardımcı olabilir.
Progresif Web Uygulaması
SVGcode, yüklenebilir bir Progresif Web Uygulamasıdır ve dolayısıyla tamamen çevrimdışıdır. Uygulama, Google'ın uygulamasında Vanilla JS şablonu Vite.js için çalışır ve popüler Vite eklentisi PWA altında Workbox.js'yi kullanır. Çalışma kutusu Progresif Web Uygulamaları için üretime hazır bir Service Worker'ı destekleyebilecek kitaplıklara sahip olan bu kalıp tüm uygulamalarda çalışmayabilir ancak SVGcode'un kullanım alanı açısından idealdir.
Pencere Denetimi Yer Paylaşımı
SVGcode, mevcut ekran alanını en üst düzeye çıkarmak için Ana menüsünü yukarı doğru taşıyarak Pencere Denetimleri Yer Paylaşımı'nı özelleştirme başlık çubuğu alanına ekleyin. Bunun, yükleme akışının sonunda etkinleştirildiğini görebilirsiniz.
File System Access API
Girdi resmi dosyalarını açmak ve elde edilen SVG'leri kaydetmek için File System Access API. Bu sayede daha öncekileri referansları bir uygulama yeniden yüklendikten sonra bile dosyaları açtığım yerden devam etmeme olanak tanıyor. Bir resim alındığında svgo kitaplığı aracılığıyla optimize edilir. Bu işlem biraz zaman alabilir. farklı olabilir. Dosya kaydetme iletişim kutusunu göstermek için kullanıcı hareketi gerekir. Evet Bu nedenle, SVG optimizasyonu yapılmadan önce dosya tanıtıcısını almak önemlidir; böylece kullanıcı optimize edilmiş SVG hazır olduğunda hareketi geçersiz kılmaz.
try {
let svg = svgOutput.innerHTML;
let handle = null;
// To not consume the user gesture obtain the handle before preparing the
// blob, which may take longer.
if (supported) {
handle = await showSaveFilePicker({
types: [{description: 'SVG file', accept: {'image/svg+xml': ['.svg']}}],
});
}
showToast(i18n.t('optimizingSVG'), Infinity);
svg = await optimizeSVG(svg);
showToast(i18n.t('savedSVG'));
const blob = new Blob([svg], {type: 'image/svg+xml'});
await fileSave(blob, {description: 'SVG file'}, handle);
} catch (err) {
console.error(err.name, err.message);
showToast(err.message);
}
Sürükle ve bırak
Girdi resmini açmak için dosya açma özelliğini kullanabilirim ya da yukarıda gördüğünüz gibi
bir resim dosyasını uygulamaya sürükleyip bırakın. Dosya açma özelliği oldukça basittir.
ilginç olanı, sürükle ve bırak özelliği. Bunun özellikle güzel tarafı,
veri aktarımı öğesinden bir dosya sistemi tutma yeri almak için
getAsFileSystemHandle()
yöntemidir. Daha önce de belirttiğim gibi, bu herkese açık kullanıcı adını kullanmaya devam edebilirim. Böylece uygulama yeniden yüklendiğinde hazır olur.
document.addEventListener('drop', async (event) => {
event.preventDefault();
dropContainer.classList.remove('dropenter');
const item = event.dataTransfer.items[0];
if (item.kind === 'file') {
inputImage.addEventListener(
'load',
() => {
URL.revokeObjectURL(blobURL);
},
{once: true},
);
const handle = await item.getAsFileSystemHandle();
if (handle.kind !== 'file') {
return;
}
const file = await handle.getFile();
const blobURL = URL.createObjectURL(file);
inputImage.src = blobURL;
await set(FILE_HANDLE, handle);
}
});
Daha fazla bilgi için File System Access API ile ilgili makaleye göz atın ve
Dilerseniz SVG kodu kaynak kodunu inceleyebilirsiniz.
src/js/filesystem.js.
Async Clipboard API
SVGcode ayrıca, Async Clipboard API'si aracılığıyla işletim sisteminin panosuyla tamamen entegre edilmiştir. İşletim sisteminin dosya gezgininde yer alan resimleri klavyenizde Command veya Control + v tuşlarına basarak resmi yapıştırın.
Async Clipboard API'si kısa süre önce SVG resimleri ile de işlem yapma becerisi kazandı. Böylece, ayrıca, bir SVG resmini kopyalayıp daha fazla işlenmesi için başka bir uygulamaya yapıştırabilirsiniz.
copyButton.addEventListener('click', async () => {
let svg = svgOutput.innerHTML;
showToast(i18n.t('optimizingSVG'), Infinity);
svg = await optimizeSVG(svg);
const textBlob = new Blob([svg], {type: 'text/plain'});
const svgBlob = new Blob([svg], {type: 'image/svg+xml'});
navigator.clipboard.write([
new ClipboardItem({
[svgBlob.type]: svgBlob,
[textBlob.type]: textBlob,
}),
]);
showToast(i18n.t('copiedSVG'));
});
Daha fazla bilgi edinmek için Eşzamansız Pano makalesini okuyun veya dosyaya göz atın
src/js/clipboard.js.
Dosya İşleme
SVGcode'un en sevdiğim özelliklerinden biri, işletim sistemiyle uyum sağlaması. Kullanıcı bir dosya işleyici ve hatta resim dosyaları için varsayılan dosya işleyici haline gelebilir. Bu macOS makinemdeki Finder'dayken bir resmi sağ tıklayıp SVG kodu olabilir. Bu özellik Dosya İşleme olarak adlandırılır ve Web Uygulaması Manifest'i ve uygulamanın iletilen dosyayı kullanmasına izin veren başlatma sırası.
window.launchQueue.setConsumer(async (launchParams) => {
if (!launchParams.files.length) {
return;
}
for (const handle of launchParams.files) {
const file = await handle.getFile();
if (file.type.startsWith('image/')) {
const blobURL = URL.createObjectURL(file);
inputImage.addEventListener(
'load',
() => {
URL.revokeObjectURL(blobURL);
},
{once: true},
);
inputImage.src = blobURL;
await set(FILE_HANDLE, handle);
return;
}
}
});
Daha fazla bilgi için Yüklü web uygulamalarının dosya işleyici olmasına izin verme başlıklı makaleye göz atın ve kaynak kodunu şuradan görüntüleyin:
src/js/filehandling.js.
Web Paylaşımı (Dosyalar)
İşletim sistemine uyum sağlamak için yararlanılabilecek diğer bir örnek de uygulamanın paylaşım özelliğidir. Diyelim ki SVGcode ile oluşturulan bir SVG'de düzenleme yapmak istiyorsanız bunu yapmanın bir yolu dosyayı kaydetmektir. SVG düzenleme uygulamasını başlatın ve sonra SVG dosyasını buradan açın. Ama daha akıcı bir akışın Dosyaların doğrudan paylaşılmasına olanak tanıyan Web Paylaşımı API'sini kullanın. Dolayısıyla, SVG düzenleme uygulaması bir paylaşım hedefiyse dosyayı sapma olmadan doğrudan alabilir.
shareSVGButton.addEventListener('click', async () => {
let svg = svgOutput.innerHTML;
svg = await optimizeSVG(svg);
const suggestedFileName =
getSuggestedFileName(await get(FILE_HANDLE)) || 'Untitled.svg';
const file = new File([svg], suggestedFileName, { type: 'image/svg+xml' });
const data = {
files: [file],
};
if (navigator.canShare(data)) {
try {
await navigator.share(data);
} catch (err) {
if (err.name !== 'AbortError') {
console.error(err.name, err.message);
}
}
}
});
Web Paylaşımı Hedefi (Dosyalar)
Diğer taraftan, SVGcode bir paylaşım hedefi görevi görebilir ve diğer uygulamalardan dosya alabilir. Alıcı: çalışmasını sağlamak için uygulamanın işletim sistemine Web Share Target API'nin kabul edebileceği veri türleri. Bu işlem, web uygulaması manifestindeki özel bir alana girin.
{
"share_target": {
"action": "https://svgco.de/share-target/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "image",
"accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
}
]
}
}
}
action rotası aslında mevcut değil ancak yalnızca hizmet çalışanının fetch rotasında işleniyor
işleyici, daha sonra alınan dosyaları uygulamada gerçek işleme için iletir.
self.addEventListener('fetch', (fetchEvent) => {
if (
fetchEvent.request.url.endsWith('/share-target/') &&
fetchEvent.request.method === 'POST'
) {
return fetchEvent.respondWith(
(async () => {
const formData = await fetchEvent.request.formData();
const image = formData.get('image');
const keys = await caches.keys();
const mediaCache = await caches.open(
keys.filter((key) => key.startsWith('media'))[0],
);
await mediaCache.put('shared-image', new Response(image));
return Response.redirect('./?share-target', 303);
})(),
);
}
});
Sonuç
Tamam, SVGcode'daki gelişmiş uygulama özelliklerinden bazılarına hızlıca göz atalım. Umarım bu uygulama görüntü işleme ihtiyaçlarınız için önemli bir araç olabilir. Squoosh veya SVGOMG.
SVGcode'u svgco.de adresinde bulabilirsiniz. Orada ne yaptığımı görüyor musun? Şunları yapabilirsiniz: ilgili kaynak kodunu GitHub'da inceleyin. Potrace’in GPL lisanslıdır. SVGcode da bu şekildedir. Ve başarılı vektörleştirmeler yapacaksınız! SVGcode'un faydalı olacağını umuyorum ve özelliklerinden bazıları bir sonraki uygulamanıza ilham verebilir.
Teşekkür
Bu makale Joe Medley tarafından incelenmiştir.