Rasterden vektöre
Hiç bir görüntüyü ölçeklendirdiğiniz ve sonucun pikselli ve tatmin edici olmadığı oldu mu? Öyleyse, muhtemelen WebP, PNG veya JPG gibi bir raster görüntü formatıyla uğraşmışsınızdır.
Raster bir görüntüyü büyütmek pikselli görünmesini sağlar. Aksine, vektör grafikleri, bir koordinat sistemindeki noktalarla tanımlanan görüntülerdir. Bu noktalar, çokgenleri ve diğer şekilleri oluşturmak için çizgiler ve eğrilerle bağlanır. Vektör grafikleri, pikselleşme olmadan herhangi bir çözünürlüğe ölçeklendirilebilmeleri bakımından raster grafiklere göre bir avantaja sahiptir.
Kalite kaybı olmadan bir vektör görüntüsünü büyütme. SVGcode ile tanışın
adlı bir PWA oluşturdum. SVG kodu raster görüntüleri vektörlere dönüştürmenize yardımcı olabilir. Kredinin vadesi geldiğinde kredi: Bunu ben icat etmedim. SVGcode ile, adı verilen bir komut satırı aracının omuzlarında duruyorum. İkramiye ile Peter Slinger benim sahip olduğum Web Montajına dönüştürüldü böylece bir Web uygulamasında kullanılabilir.
bu SVG kodu uygulama. SVGcode’u kullanma
İlk olarak, uygulamayı nasıl kullanacağınızı göstermek istiyorum. ChromiumDev Twitter kanalından indirdiğim Chrome Dev Summit teaser görüntüsü ile başlıyorum. Bu, daha sonra SVGcode uygulamasına sürüklediğim bir PNG raster görüntüsü. Dosyayı bıraktığımda, uygulama girdinin vektörleştirilmiş bir versiyonu görünene kadar görüntüyü renge göre izler. Artık görüntüyü yakınlaştırabilirim ve görebileceğiniz gibi kenarlar keskin kalıyor. Ancak Chrome logosunu yakınlaştırdığınızda, izlemenin mükemmel olmadığını ve özellikle logonun ana hatlarının biraz benekli göründüğünü görebilirsiniz. Beş piksele kadar benekleri bastırarak izlemedeki benekleri gidererek sonucu iyileştirebilirim.
Düşen bir görüntüyü SVG’ye dönüştürme. SVGcode’da posterleştirme
Özellikle fotoğraf görüntüleri için vektörleştirme için önemli bir adım, renk sayısını azaltmak için giriş görüntüsünün posterleştirilmesidir. SVGcode, bunu renk kanalı başına yapmama ve değişiklik yaparken ortaya çıkan SVG’yi görmeme izin veriyor. Sonuçtan memnun kaldığımda, SVG’yi sabit diskime kaydedebilir ve istediğim yerde kullanabilirim.
Renk sayısını azaltmak için bir görüntüyü posterleştirme. SVGcode’da kullanılan API’ler
Artık uygulamanın neler yapabileceğini gördüğünüze göre, size sihrin gerçekleşmesine yardımcı olan bazı API’leri göstermeme izin verin.
Aşamalı Web Uygulaması
SVGcode, kurulabilir bir Aşamalı Web Uygulamasıdır ve bu nedenle tamamen çevrimdışı etkindir. Uygulamanın dayanmaktadır Vanilya JS şablonu için Vite.js ve popüler kullanır PWA eklentisini çalıştırın kullanan bir hizmet çalışanı oluşturan Workbox.js kaputun altında. Workbox, Progresif Web Uygulamaları için üretime hazır bir hizmet çalışanına güç sağlayabilen bir dizi kitaplıktır. Bu model, tüm uygulamalar için mutlaka çalışmayabilir, ancak SVGcode’un kullanım durumu için harikadır.
Pencere Kontrolleri Yer Paylaşımı
Kullanılabilir ekran alanını en üst düzeye çıkarmak için SVGcode, ana menüsünü başlık çubuğu alanına taşıyarak Pencere Kontrolleri Yer Paylaşımı özelleştirmesini kullanır. Bunun yükleme akışının sonunda etkinleştirildiğini görebilirsiniz.
SVGcode’u yükleme ve Window Controls Overlay özelleştirmesini etkinleştirme. Dosya Sistemi Erişim API’sı
Girdi görüntü dosyalarını açmak ve ortaya çıkan SVG’leri kaydetmek için Dosya Sistemi Erişim API’sini kullanıyorum. Bu, daha önce açılmış dosyalara bir referans tutmamı ve bir uygulama yeniden yüklendikten sonra bile kaldığım yerden devam etmemi sağlıyor. Bir görüntü kaydedildiğinde, şu şekilde optimize edilir: svgo SVG’nin karmaşıklığına bağlı olarak biraz zaman alabilir. Dosya kaydetme iletişim kutusunun gösterilmesi, bir kullanıcı hareketi gerektirir. Bu nedenle, SVG optimizasyonu gerçekleşmeden önce dosya tanıtıcısını elde etmek önemlidir, böylece optimize edilmiş SVG hazır olduğunda kullanıcı hareketi geçersiz kılınmaz.
try {
let svg = svgOutput. innerHTML;
let handle = null ;
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) ;
} Bir damla sürükleyin
Bir giriş görüntüsünü açmak için, dosya açma özelliğini kullanabilirim veya yukarıda gördüğünüz gibi, bir görüntü dosyasını uygulamaya sürükleyip bırakmanız yeterlidir. Dosya açma özelliği oldukça basittir, daha ilginç olan sürükle ve bırak durumudur. Bununla ilgili özellikle güzel olan şey, veri aktarım öğesinden bir dosya sistemi tanıtıcısı alabilmenizdir. getAsFileSystemHandle()
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 ayrıntı için, Dosya Sistemi Erişim API’si hakkındaki makaleye göz atın ve ilgileniyorsanız, SVGcode kaynak kodunu şu adreste inceleyin: src/js/filesystem.js
Eşzamansız Pano API’sı
SVGcode ayrıca Async Clipboard API aracılığıyla işletim sisteminin panosuyla tamamen entegredir. Görüntüleri yapıştır düğmesini tıklatarak veya klavyenizdeki komut veya kontrol artı v tuşlarına basarak işletim sisteminin dosya gezgininden görüntüleri uygulamaya yapıştırabilirsiniz.
Dosya gezgininden bir görüntüyü SVGcode’a yapıştırma. Zaman Uyumsuz Pano API’si yakın zamanda SVG görüntüleriyle de başa çıkma yeteneği kazanmıştır, böylece ayrıca bir SVG görüntüsünü kopyalayabilir ve daha sonraki işlemler için başka bir uygulamaya yapıştırabilirsiniz.
Bir görüntüyü SVGcode’dan SVGOMG’ye 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 bakın src/js/clipboard.js
Dosya yönetimi
SVGcode’un en sevdiğim özelliklerinden biri, işletim sistemiyle ne kadar iyi uyum sağladığıdır. Yüklü bir PWA olarak, görüntü dosyaları için bir dosya işleyicisi veya hatta varsayılan dosya işleyicisi olabilir. Bu, macOS makinemde Finder’dayken bir resme sağ tıklayıp onu SVGcode ile açabileceğim anlamına geliyor. Bu özelliğe Dosya İşleme adı verilir ve Web App Manifest’teki file_handlers özelliğine ve uygulamanın iletilen dosyayı tüketmesine izin veren başlatma kuyruğuna dayalı olarak çalışır.
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 bkz. Yüklü web uygulamalarının dosya işleyicileri olmasına izin verin ve kaynak kodunu şu adreste görüntüleyin: src/js/filehandling.js
Web Paylaşımı (Dosyalar)
İşletim sistemiyle uyum sağlamanın bir başka örneği de uygulamanın paylaşım özelliğidir. SVGcode ile oluşturulan bir SVG’de düzenlemeler yapmak istediğimi varsayarsak, bununla başa çıkmanın bir yolu dosyayı kaydetmek, SVG düzenleme uygulamasını başlatmak ve ardından buradan SVG dosyasını açmak olacaktır. Yine de daha sorunsuz bir akış, dosyaların doğrudan paylaşılmasına izin veren Web Paylaşımı API’sini kullanmaktır. 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) ;
}
}
}
} ) ; Bir SVG görüntüsünü Gmail’de paylaşma. Web Paylaşımı Hedefi (Dosyalar)
Öte yandan, SVGcode ayrıca bir paylaşım hedefi görevi görebilir ve diğer uygulamalardan dosya alabilir. Bunun çalışması için uygulamanın işletim sistemine Web Paylaşımı Hedef API’si aracılığıyla hangi tür verileri kabul edebileceğini bildirmesi gerekir. Bu, Web App Manifest’teki özel bir alan aracılığıyla gerçekleşir.
{
"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" ]
}
]
}
}
} bu action rota gerçekte mevcut değildir, ancak yalnızca hizmet çalışanının fetch işleyici, daha sonra uygulamada gerçek işleme için alınan dosyaları aktarır.
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 ) ;
} ) ( ) ,
) ;
}
} ) ; Bir ekran görüntüsünü SVGcode’da paylaşma. Çözüm
Pekala, bu, SVGcode’daki bazı gelişmiş uygulama özellikleri arasında hızlı bir turdu. Umarım bu uygulama, diğer harika uygulamaların yanı sıra görüntü işleme ihtiyaçlarınız için önemli bir araç haline gelebilir. Squoosh veya SVGOMG .
SVGcode şu adreste mevcuttur: svgco.de . Orada ne yaptığımı gördün mü? Yapabilirsiniz kaynak kodunu GitHub’da inceleyin . Potrace GPL lisanslı olduğu için SVGcode’un da lisanslı olduğunu unutmayın. Ve bununla, mutlu vektörleştirme! Umarım SVGcode faydalı olur ve bazı özellikleri bir sonraki uygulamanıza ilham verebilir.
