Görüntünün herhangi bir bölümünü img etiketinde (piksellerle) JavaScript ile göstermek mümkün müdür?JavaScript ile bir resmin parçası alma
Hazırlanmış büyük bir görüntü (örn. 32x320 piksel) ve tanımlanmış başlangıç konumu (X, Y, örneğin 0,32) ve genişlik/yükseklik (örn. 32,32) olurdu ve komut dosyasının ikinci olarak gösterilmesini isterdim (32x32 piksel) ana resmin bir parçasıdır.
Bunun için CSS özelliklerini kullanabilir ve bunları JS ile değiştirebilirsiniz. Görüntüyü istediğiniz boyutta bir öğe için arka plan olarak ayarlayın ve konumunu doğru kısmı görünecek şekilde arka plan konumuyla ayarlayın. Bazı insanlar buna CSS sprites diyor.
+1 DIV kullanmak zorunda bile değilsiniz. Ben şeffaf bir PNG kullanın ve bu amaç için de iyi çalışan arka plan görüntüsünü kullanıyorum, ancak bana şamandıralarla uğraşmak zorunda kalmak istemediğimde yapay olarak satır içi nesneyi kullanma seçeneği sunuyor. – Robusto
Evet, doğal olarak bu herhangi bir öğe. Bir img elementi kullanmak bana biraz kirli geliyor, muhtemelen ekranı kullanıyorum: inline-block; Eğer elemanın metin ile akmasını istedim. –
Size birden çok seçenek sunmak amacıyla, her zaman bir HTML5 tuvali kullanabilir ve resmi gerektiği gibi yeniden çizebilirsiniz. Burada nasıl yapılacağı hakkında güzel bir eğitici bulabilirsiniz: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images IE henüz tuvali desteklemediğinden, CSS hareketli yöntemi tercih edilebilir.
, çektiğiniz görüntüyü bir veri url'si olarak kaydedebilirsiniz. Http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/ –
Olası kopyası [Bir resmin sadece bir kısmını HTML/CSS'de nasıl görüntüleyebilirim?] (Https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion- of-an-image-in-html-css) – vaxquis
Başvurulan soru html/css ile ilgili olsa da, bu JavaScript içindi. – Alper
, sorunuzun dolaylı olarak JavaScript DOM ile ilgili olduğundan ve DOM'un HTML/CSS için bir programlama arka ucundan çıktığından, sorunuzun * HTML/CSS'nin kendisi hakkında * olduğunu biliyor musunuz? Buradaki kabul edilen cevap, bu sebepten dolayı CSS'ye işaret ediyor. HTML */CSS'yi hesaba katmadan * JSJ * * yapamazsınız - diğer cevapta belirtilen HTML5 tuval öğesi de sadece bir HTML5 doküman öğesidir. – vaxquis