10 Kasım 2013, Pazar

Bootcamp 9 - Piksel Manipülasyon Tuval

Merhaba bu kampüs çizme kampa geri hoşgeldiniz piksel manipülasyon yöntemlerini ve özelliklerini kullanmayı öğreneceksiniz egzersiz Piksel manipülasyon piksel kopyalama için yararlıdır Kampüste belirtilen dikdörtgen bölgede ve manipülasyon için yeni görüntü veri nesnesini oluşturmak için dönüşüm Ben yapacağım ilk şey benim kampüs iki dikdörtgen olan Her ilk kırmızı Phil tarzı vardır, farklı bir his tarzı vardır ve bir sonraki ilki yerleştirilen mavi hissediyorum tarzı vardır Yirmi X ve yirmi y 40x ikinci dikdörtgenler yer niye ithal şimdi bazı resimler bir manipülasyon başlayacak Hadi onlar bu iyi

vermek ne görelim ile ilişkili üç özelliklerinde üç teknikte Kampüste piksel manipülasyon kim yapacak bir kaç satır çok olmuştur çubuğunu aşağı gidin CTX nokta eşit kaynak net görüntü verileri yöntemi görüntü verilerini get

dört parametre fuar alır y konumu ve yükseklik almak ve görüntü verisi bir görüntü veri nesnesi karşılık gelen döner bu dört parametre kullanılarak ayarlanır gidiyoruz dikdörtgen Eğer istersen fuar bir dikdörtg

“Ders Kodu: http://www.developphp.com/video/JavaScript/Pixel-Manipulation-on-Canvas Bu JavaScript tuval programlama egzersiz Pixel Manipülasyon yöntemlerini ve öze...”
Adam Khoury

en olarak ve o zamandan beri bir görüntü elde set bkz İlk dikdörtgen başlattı Biz başlatmak için gidiyoruz nerede yirmi geniş X 20m olsun görüntü verisi vardır ne olursa olsun piksel Burada belirttiğiniz dikdörtgen içinde öylesine dikdörtgen Ortaya çıkan görüntü verileri nesnesine kopyalanacak gidiyor Ben önce 50 piksel 20 $ 20 dk başlayacağım 50 piksel yüksek 250 piksel genişliğinde 50 piksel Şimdi bu nokta CTX kullanabilirsiniz neden 20'

Bootcamp 9 - Piksel Manipülasyon Tuval Resim 1 Bootcamp 9 - Piksel Manipülasyon Tuval Resim 2 Bootcamp 9 - Piksel Manipülasyon Tuval Resim 3 Bootcamp 9 - Piksel Manipülasyon Tuval Resim 4

de 20 X başlıyorum dot o görüntü veri koymak için görüntü verisi yöntemi koymak geri kampüste yüzden biz çizmek istiyoruz diyelim kampüse geri çekmek için kaynak Görüntü verileri ve fuar 250 20 biçimi Ana y konumu bu kadar Buraya bir yerde şimdi görebiliyorum en kampüsümüz tazeleyelim biz istediğimiz yerde koymak yeni görüntü verilerini almak ve biz koymak görüntü verisi karşılık Biz kampüs buradan bu alanda kopyalanan resimler ve boş yeni yaratan görüntü verilerini oluşturmak denilen başka bir yöntem var Görüntü verileri n

esnesi nasıl yanı hemen bunu kullanmaya gösterecektir Biz bir an bu put görüntü verisi yöntemi kaldırabilirsiniz alışveriş merkezi, bu eşit olacak denilen kopyası başka bir değişken koymak do CTX görüntüsü oluşturmak nokta veri açık yakın parantez noktalı virgül Eğer yapmak zorunda oluşturmak görüntü verisi yöntemi ile tedarik ve yüksekliği Ben istiyorum yüksekliği benim kaynak görüntü nesnesi ile için eşit hale bu yüzden kaynak kopya ile kaynak nokta söylemek ve bu biridir sadece edebilirsiniz özellikleri o yapabilirsiniz Bu yükseklik kaynak sonra pics için bir manipülasyon ve erişim yani esasen sadece burada 50 ve 50 koyabilirsiniz Eğer sert bir görüşme bu numaraları isterseniz n ben bizim kampüs yenileyin eğer öyleyse biz kopya koymak değil çünkü biz sadece iki orijinal dikdörtgenler çizilmiş olsun geri kampüs üzerine ve daha önce biz var bunu kelepçe Ray veri, tesisi kopyalama ve kalabalık erişmek bu kaynaktan veri özelliği temelde yapmak istiyorum Kaynak nokta eşit kopya nokta verileri Eğer bir for döngüsü ile yapabilirsiniz verileri yüzden döngü için yukarı açalım İlk olacak döngü olduğunu parametre bar olmam 0'a eşit ve Luke önce sonraki parametre olacak kopya nokta data özelliğini olsun bir dot Lancs ve verileri hatırlayacak Tesiste kelepçe hızı ve hangi oranda temsil ettiği kelepçe olduğunu Her piksel için bir değerler RGB olduğu değerler 0 ile değişebilir bilir İkinci parametre için 255 olacak iken söylemek Ben veri uzunluğu nokta kopya daha az ve ben 20.000 piksel olacak nesneleri olduğu 50 resim 50 tarafından bunun için düşünüyorum sonra nihayet son parametre ise ben artı artı böylece döngü bu geçmek üzere ayarlanmış Tüm bu kelepçelenmiş dizi içinde verilere bir kopyasını görebilirsiniz döngü içinde böylece nokta veri ve dizi dizin içinde II koymak Biz kaynak verileri içindir bakmak ne olursa olsun endeks verileri kaynak eşittir yani temelde yaptığı tüm kaynak verileri almak olduğunu ve bu şekilde bu kenetlenmiş böylece kopya veri koymak Dizi bu alkışladı dizinin eşit olacak ve sonra nihayet biz CTX tipi koymak koyabilirsiniz görüntü verileri bu kez yerine koyarak kaynağı veya kameralar geri kaynağı çizim olacak kopyasını çekmek edildi böylece konumlandırma Sadece o kopya koymak ve let Ben 50x ve yirmi y istedi bu yüzden biz aynı etkiyi elde yenileme izin Şimdi tarayıcısında bu dosya önizleme bakalım Internet explorer çok iyi Internet Explorer Aynı sonuçlar şimdi bu kaynağı koyabilirsiniz başka bir yolu var olsun kopyalar veri içine veri nerede yapabilirsiniz Ben for döngüsü bu dışarı açıklama olsaydı yüzden dedi ve biz hiçbir görüntü verilerini almak görmek taze temelde bu kopya boş değil çünkü yerleştirilen Şimdi bazen insanlar görmek nesne görüntü verileri böyle bir şey olduğunu bunu Ben tasarıyı oluşturulan döngü için böyle bir şey yapmak zorunda Onlar kopya Dada set dot öldü söylerim Şimdi bunu yapmak veriler üzerinde bir dizi yöntemini çalıştırmak ve Kaynak nokta verilerine eşit yani temelde kaynak alarak Veri ve kaynağından bu verilerle kopya ayar verilerini ediyoruz İlk kullanıcısının krom Bunu kontrol edelim Ben bu kadar aynı etkiyi elde yenileme zaman döngü için koşmak zorunda değilsiniz krom bilgi Internet Explorer arıyorum Ben bir get bakın yenilediğinizde bu Internet Explorer gibi görünüyor Hiçbir sonuç nedense çünkü Internet Explorer Firefox ve Chrome çok set yöntemi saygı değil Eğer yöntemini ayarlamak için kullanılacak iyi bir sonuç almak olduğunu göreceksiniz veri için ancak Internet Explorer için burada bu hat üzerinden bir kopyasını tarama değilim ama Ben referansı için de bırakacağım görürsünüz artık Internet Explorer'da yerine geri döngü koymak Biz istiyoruz sonuç almak. for döngüsü basit Hiç gerçek görüntüler için piksel verileri kopyalamak için gereken var veya harici kaynaklar dış kaynaklar dosyalar Eğer sorun bu yerel inceleyen olabilir bana bir barda konur dediğimi sana göstereyim Yeni görüntü nesnesine yasadışı çağırdı pic Peki ne yapmam gerekir kaynak eşit olduğunu bir pic Ben benim renkli dikdörtgenler eklemeden başlamadan önce şimdi kullanmak istediğiniz ne olursa olsun görüntü kampus Ben CTX nokta beraberlik görüntüsünü özledim Ben imza pic kampüsünde bu görüntüyü koyacağım Ben nereye gitmek istediğini benim ilk parametre olarak ve daha sonra Ben sadece o 0 X ve 0Y koyacağım bu yüzden şimdi ben bu şeyler arkasında benim pembe böceği olsun göreceksiniz yenileme durumunda İlk şimdi kampüs çizilmiş oldu çünkü görüntü verilerini alabilirsiniz 0 x0, y başladı ve ben de toplamak ediyorum bir kopyasını 100 piksel 100 piksel o kadar veri Şimdi yenileme biz de olsun orada göreceksiniz gerçek görüntü dosya veri pikseller kopyalanır çok o bölge krom olduğunu kontrol içinde Ben Firefox'ta herhangi bir sonuç göremeyebilirsiniz burada herhangi bir sonuç krom görmüyorum ya yerel olarak test eğer yapmanız gereken bu dosyayı almak olduğunu ne olursa olsun kameralar öğretici testi üzerinde çalışıyor ben şimdi yapacağım şey bu yüzden ve size canlı web sunucusu koydu Gördüğünüz Internet Explorer yerel çevrede oldu o çalıştı ama bir düzine krom için böylece neler fiili ile krom test sizler görüntüler ve daha sonra o size hiç çalışmıyor neden merak sizi çalışmıyor Online bu dosyaları koymak yapmak zorunda şimdi yerine test yerel Adam Khoury gideceğim dot com kulüpler HTML şimdi görüyoruz kampüs öğretici Ben aslında çünkü Google Chrome'da ben de sonuç çalışma oraya Online bu yüzden yerel Bunu sınamak tarayıcısı Firefox test önizleme gidelim iyi Firefox ve Internet Explorer ince Firefox yerel çalışıyor Pembe ladybug pic bu görüntü verileri alma ile yerel çalışma Nedense sorunu var sizin için krom bakın Bu krom çalışma benim web sunucusunda hattı üzerinde olduğu için sadece çalışır bkz ince ama şimdi tarayıcı krom önizleme dosya giderseniz Benim yerel ortamda hiçbir sonuç almak Benim yerel ortamda o görüntüyü saygı değil çünkü böylece krom test hiçbir sonuç sadece ilgili dosyaları koymak görmek ne çizgi temelde Yani hepsi Ben bu yüzden bu derste sen üç özelliği öğrendim merhaba ve veri olanlar Görüntünün için erişebileceğiniz üç özellik vardır veri nesneleri kampüs piksel manipülasyon 3 yönteminde erişebilirsiniz oluştururken görüntü verileri görüntü verilerini almak ve koyun görüntü verileri yerine kaynak ile kötüye ve görüntü verileri oluşturmak yöntemi içinde boğaz stok yüksekliği iki parametreleri sadece bir parametre koyabilirsiniz size başvuran olursa olsun görüntü nesnesine eşit bunu bir parametre beslemek eğer kırbaç alacak ve kaynak görüntü verilerinden yüksek otomatik nesne Firefox dosya önizleme ile bir çalışma göstermek için CC aynı sonuçlar nerede yaşıyorum senaryoda hiç sana sahip olsun senin Belirli bir kısmından piksel veri kopyalama Kampüs o piksel verileri yeni bir görüntü verisi nesne oluşturma Sadece bu kaynak var orada bir parametre koyabilirsiniz veya Aynı etki olan her iki parametreleri ile bunu temin edebilir.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/Pixel-Manipulation-on-Canvas Bu JavaScript tuval programlama egzersiz Pixel Manipülasyon yöntemlerini ve özelliklerini kullanmayı öğreneceksiniz. Piksel manipülasyon ve manipülasyon veya dönüşüm için yeni ImageData nesneleri oluşturmak için tuval üzerinde belirtilen dikdörtgen bölge pikselleri kopyalamak için yararlıdır.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.7/10

  • 40
    Olumlu
  • 1
    Olumsuz
  • 9
    Yorum
  • 4344
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • amc

    amc

    21 EYLÜL 2005
  • Baby Big Mouth

    Baby Big Mou

    5 Mart 2013
  • Cristina Landa

    Cristina Lan

    28 Ocak 2010

ANKET



Bu sayfa işinize yaradı mı?