SVGcode: Kafes resimleri SVG vektör grafiklerine dönüştüren bir PWA

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.

Thomas Steiner

ziyaret edin.
(Okumak yerine izlemeyi tercih ediyorsanız bu makaleyi video olarak da bulabilirsiniz.)

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.

Bir kafes resmin ölçeklenmesi, pikselleştirilmiş görünmesine neden olur.

Ö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 azaltılması açısından kafes grafiklere kıyasla bir avantaj olmadan çalışır.

Kaliteden ödün vermeden bir vektör görüntüsünü ölçeklendirmek.

SVGcode tanıtımı

SVGcode adlı bir PWA oluşturdum. Bu PWA, kafes resimleri vektörleri alır. 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ı.

SVGcode uygulamasının ekran görüntüsü.
SVGcode 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.

Bırakılan bir resmi SVG'ye dönüştürüyorum.

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.

Renk sayısını azaltmak için bir resme poster oluşturma.

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.

SVGcode'u yükleme ve Pencere Denetimleri Yer Paylaşımı özelleştirmesini etkinleştirme.

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.

Dosya gezgininden bir resmi SVGcode'a yapıştırma.

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.

SVGcode'dan SVGOMG'ye resim kopyalama. 
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ı.

Yüklü SVGcode uygulamasıyla masaüstünden bir dosya açma. 
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);
      }
    }
  }
});
Gmail'de SVG resmi paylaşma.

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);
      })(),
    );
  }
});
SVGcode'da ekran görüntüsü paylaşılıyor.

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.