jQuery BlendMode Eklentisi

Photoshop’ta bazı işlemleri HTML5 ve Javascript yardımıyla basit şekilde yapabilmemizi sağlayan bir eklentiden bahsedeceğim. Photoshop’taki adıyla aynı ismi taşıyan eklentimiz BlendMode. jQuery eklentimiz de HTML5’in canvas özelliğini kullanarak işlemi gerçekleştirmektedir. Photoshop’un Blend Mode özelliğiyle yaptığınız çalışmanın bire bir aynısını bu eklenti sayesinde çıktı olarak alabilirsiniz.

Eklentimizin (Plugin) tanıtım sayfası: http://codewelt.com/blendmode

Yukarıda bulunan adresten ya da örnek kullanım dosyalarıyla birlikte direkt şu adresten eklentiyi indirebilirsiniz. Ayrıca örnek kullanıma ulaşabilir ve demoları inceleyebilirsiniz. Ben de eklentinin (plugin) sayfasındaki örnek resmi kullanacağım. Daha rahat görebilmeniz için resmimizi hem Photoshop’ta hem de eklenti yardımıyla aynı işleme tabii tutacağım.

jQuery eklentimizi adresten indirdiğinizi varsayıyorum. Şimdi kullanımına bakalım. Çok basit:

jQuery Kısmında:


$("#kaynakResim").blendmode({
 "mode" : "difference",
 "object" : "#FFFFFF"
 });

HTML kısmına geçmeden jQuery eklenti fonksiyonunun aldığı parametrelere göz atalım.

mode (string): “normal”, “multiply”, “lighten”, “darken”, “lineardodge”, “linearburn”, “linearlight”, “vividlight”, “pinlight”, “hardmix”, “lightercolor”, “darkercolor”, “difference”, “screen”, “exclusion”, “overlay”, “softlight”, “hardlight”, “colordodge”, “colorburn”

object (image): Kullandığımız tuval için bir taban renk seçimi yapıyoruz. Kullanacağınız rengin HEX kodunu kullanabilirsiniz. Ben örneklerimde “#FFFFFF” (beyaz) kullandım. Bu parametrede yapacağınız renk değişikliklerine göre resminizden alacağınız çıktı da değişmektedir.

HTML Kısmında:

<img id="kaynakResim" src="kaynakResim.png"/>

Elimizdeki örnek resmimizin Photoshop’ta “difference” modunda işlenmiş hali:

blendmodeps

Bir de eklentimizle aynı görüntüyü elde etmeye çalışalım bakalım:

Kaynak Kodu:


<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title>jQuery BlendMode Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.blendmode.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#kaynakResim").blendmode({
'mode' : "difference",
'object' : "#FFFFFF"
});
});
</script>
</head>
<body>
<img id="kaynakResim" src="kaynakResim.png" width="450" height="431" alt="The source image for blending"/>
</body>
</html>

Ekran Çıktısı:

blendmode-html5

Eklentinin (plugin) en büyük sıkıntısı sadece 3 tarayıcıda sorunsuz çalışıyor olmasıdır. Firefox’ta çalışan eklentimiz Chrome’da hiç çıktı vermemektedir.

Destekleyen Tarayıcılar:

  • Firefox
  • Safari
  • Opera

Son Söz: Genel istatistiklere bakacak olursak ziyaretçilerin büyük çoğunluğu (bazen %50 gibi ciddi oranları geçtiğini söyleyebilirim) Google Chrome kullanmakta olduğundan dolayı genele hitap etmek istediğiniz bir projede/çalışmada bir süre daha pek tercih etmemenizde fayda var derim. Onun haricinde başarılı ve eklenti çantanızda bulundurmanızı tavsiye ettiğim bir eklentidir.

Bu yazı Javascript / jQuery, Photoshop kategorisine gönderilmiş ve , , , , , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir