Programowanie > Inne
o JavaScrypt ... i zabezpieczeniu Autorstwa "obrazów"
(1/1)
fand:
Na wstępie - proszę Moderatora o "reakcję/przeniesienie" = jeżeli nie to miejsce Forum.
Już przedyskutowana kwestia PrtScr = nie zachowuje MIME Obrazów (np. GIMPowych, czyli też fotografii)...
Zamierzam odczytywać np. Node/PHP z bitmapy "porcje/fragmenty" ich treści, i Ajaxem "barwić" zgodnie obszar na "layoucie".
Jeżeli Odpowiesz Kodem = uznam, że wspieram środowisko, które mnie też wspierało.
Niby "zabawa", a mi na moją stronę zależy...
szacuję (na moją potrzebę) obrazy "ważące" około 4 MB i żeby nie zapingować = mimo, że "odsłon" mam kilkanaście miesięcznie :)
Muszę "modyfikować" heksadecymalnie 6x1 B na barwy i dla wielkości (przecież) większej od 256 2x4 B czyli 14 B a prawdziwy "mój obszar" to około 800/380 px.
Paweł Kraszewski:
Dział dobry...
Ale szósty raz czytam i nie wiem o co chodzi... Zaczekaj aż amfa/koka/kawa przestanie działać i przeredaguj to.
Mam też wrażenie, że nie do końca rozumiesz termin MIME... Dla obrazów będziesz miał np. takie MIME: image/jpeg, image/png czy image/tiff. Może chodzi ci o metadane?
fand:
--- Cytat: Paweł Kraszewski w 2017-11-17, 09:14:07 ---Dział dobry...
Ale szósty raz czytam i nie wiem o co chodzi... Zaczekaj aż amfa/koka/kawa przestanie działać i przeredaguj to.
Mam też wrażenie, że nie do końca rozumiesz termin MIME... Dla obrazów będziesz miał np. takie MIME: image/jpeg, image/png czy image/tiff. Może chodzi ci o metadane?
--- Koniec cytatu ---
Nie odpisywałem, byłem zajęty "kodowaniem" = czy zgodzicie się, że skonsultuję ilustrując?... : programuję "pasjonacko"
Moja "bitmapa" ma wielkość 493/370 px. Zamierzam sformułować animacje wyświetlania takiego obrazu używając Ajax.
Odnośnie "MIME", to moje dyletanctwo fotograficzne, ale wiem że pliki obrazów wyświetlają dane o obiektywie sprzęcie danych naświetlania i "jest" to "dowód" autentyczności żródła (?) Tak czy inaczej, aby douczyć się programowania "ćwiczę" na tym przykładzie.
Nie chcę nadużywać uprzejmości, ale odczytywanie i przeniesienie wyniku = okazuje się skłamane, chyba ze względu na kwestię sekwencji bajtów "rekordów" pikseli. ufff....
Chcę dodać "ulustracje", ale nie umiem tym edytorem "wyświetlić"..
Link do "wzoru "obrazu" = dość wyeksportować GIMPem.
http://eko-fand.pl
--- Kod: ---
[size=12pt]<HEAD>
<LINK REL="stylesheet" HREF="css/style1.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
<?PHP
$linje = 55;
$porcja = 1972;
$naglowek = 53;
$bmp = file_get_contents("obrazy/moczary.bmp");
$bmp = substr($bmp, 54, $linje*$porcja );
$output = [] ;
for($i=0; $i < $linje*$porcja; $i++) {
$output[$i]= ord(substr($bmp,$i,1)); // ? zasięg tej "tablicy" ? czy tylko dla pętli
}
?>
function rysujWreszcie(){
var canva = document.getElementById('obrazuj');
var ctx = canva.getContext('2d');
<?PHP
for($a=1; $a < $linje; $a++) {
for($b=0; $b < $porcja; $b=$b+4){
print("ctx.fillStyle = 'rgba(");
print(ord(chr($output[$a*$porcja+$b+2])).", "); // o = tu "korzystam" z tablicy
print(ord(chr($output[$a*$porcja+$b+1])).", ");
print(ord(chr($output[$a*$porcja+$b])) . ", ");
print( $output[$a*$porcja+$b+3] .")';\n");
print("ctx.fillRect(".$b/4 .", ".$a.", 1, 1);\n");
}
}
?>
}
</script>
</HEAD>
[/size]
--- Koniec kodu ---
--- Kod: ---
<div id="zawartosc">
<canvas id='obrazuj' width='490' height='300' onmouseover="rysujWreszcie()"></canvas>
</div>
--- Koniec kodu ---
Oto kod wynikły z "PHP":
Ocywiście Ajax będzie zawierać tablicę "buforującą" i funkcję z "pętlą"...
--- Kod: ---
function rysujWreszcie(){
var canva = document.getElementById('obrazuj');
var ctx = canva.getContext('2d');
ctx.fillStyle = 'rgba(9, 0, 17, 15)';
ctx.fillRect(0, 1, 1, 1);
ctx.fillStyle = 'rgba(14, 8, 0, 0)';
ctx.fillRect(1, 1, 1, 1);
ctx.fillStyle = 'rgba(2, 15, 9, 15)';
ctx.fillRect(2, 1, 1, 1);
ctx.fillStyle = 'rgba(25, 10, 21, 31)';
ctx.fillRect(3, 1, 1, 1);
ctx.fillStyle = 'rgba(37, 31, 17, 0)';
ctx.fillRect(4, 1, 1, 1);
ctx.fillStyle = 'rgba(6, 15, 9, 18)';
ctx.fillRect(5, 1, 1, 1);
ctx.fillStyle = 'rgba(51, 37, 24, 57)';
ctx.fillRect(6, 1, 1, 1);
ctx.fillStyle = 'rgba(56, 50, 36, 5)';
ctx.fillRect(7, 1, 1, 1);
ctx.fillStyle = 'rgba(0, 23, 17, 10)';
ctx.fillRect(8, 1, 1, 1);
ctx.fillStyle = 'rgba(18, 4, 16, 24)';
ctx.fillRect(9, 1, 1, 1);
...
....
ctx.fillStyle = 'rgba(12, 25, 28, 29)';
ctx.fillRect(483, 54, 1, 1);
ctx.fillStyle = 'rgba(26, 9, 25, 23)';
ctx.fillRect(484, 54, 1, 1);
ctx.fillStyle = 'rgba(20, 23, 6, 2)';
ctx.fillRect(485, 54, 1, 1);
ctx.fillStyle = 'rgba(0, 16, 20, 16)';
ctx.fillRect(486, 54, 1, 1);
ctx.fillStyle = 'rgba(13, 0, 12, 11)';
ctx.fillRect(487, 54, 1, 1);
ctx.fillStyle = 'rgba(22, 18, 4, 2)';
ctx.fillRect(488, 54, 1, 1);
ctx.fillStyle = 'rgba(0, 22, 16, 7)';
ctx.fillRect(489, 54, 1, 1);
ctx.fillStyle = 'rgba(0, 0, 13, 6)';
ctx.fillRect(490, 54, 1, 1);
ctx.fillStyle = 'rgba(11, 5, 0, 6)';
ctx.fillRect(491, 54, 1, 1);
ctx.fillStyle = 'rgba(8, 25, 19, 23)';
ctx.fillRect(492, 54, 1, 1);
ctx.translate(25, 493);
console.log(ctx);
}
--- Koniec kodu ---
Dopisuję "po godzince": na "Elektrodzie" znalazłem wiadomość, że plik bitmapy to plik "z odwróconym porządkiem 'rekordów' = jeżeli osiągnę konstruktywny wynik - podam kontynuację.
tą kwestię (odwrócony...) "zamknąłem" tak:
--- Kod: ---
$bmp = substr($bmp,(390-$linje)*$porcja);
$bmp = strrev($bmp);
--- Koniec kodu ---
Kończąc "temat" i zapewniając, że dla 640/480 "też działa" podaję zawartość "roboczego źródła":
W załączniku "PrtScr"
( a mowa była o Meta danych Obrazów publikowanych pośród Internetu = jeżeli chcemy umiemy je opisać w komentarzach fotografiii)
--- Kod: ---
<HEAD>
<LINK REL="stylesheet" HREF="css/style1.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
<?PHP
$linje = 240;
$porcja = 320*3;
$naglowek = 54;
// TU UWAGA = strona kodowa w "php.ini" ustawiona na "zestaw znaków" "ISO-8859-2" inaczej już nie będę sprawdzał
$bmp = file_get_contents("obrazy/moczary.bmp");
$bmp = strrev($bmp);
$bmp = substr($bmp,0,$linje*$porcja);
$lenperlin = strlen($bmp)/$linje;
//print( "var liter = '" . $lenperlin . " liter'");
?>
// Pierwszy fragment "pod Ajax"
function getXMLHTTPRequest ()
{
var reqest = false;
try
{
reqest = new XMLHttpRequest();
}catch(err1){
}
return reqest;
}
// Koniec pierwszego fragmentu "pod Ajax".
function rysujWreszcie(){
var canva = document.getElementById('obrazuj');
var ctx = canva.getContext('2d');
<?PHP
for($a=$linje; $a >=0 ; $a--) {
for($b=0 ; $b <=(320*3)-1; $b=$b+3){
print("ctx.fillStyle = 'rgba(");
print(ord(chr(ord(substr($bmp,$a*$porcja+$b,1)))).", ");
print(ord(chr(ord(substr($bmp,$a*$porcja+$b+1,1)))).", ");
print(ord(chr(ord(substr($bmp,$a*$porcja+$b+2,1)))) . ", ");
print("1 )';\n");
print("ctx.fillRect(". (((320)-(($b)/3))+1) .", ". ($a+1) .", 1, 1);\n");
}
}
?>
}
ctx.translate(x, y);
// początek fragmentu fragmentu "pod Ajax".
function punktuj(r,g,b,x,y, ctx)
{
ctx.fillStyle = 'rgba(' + b + ',' + g + ',' + r + ', 1 )';
ctx.fillRect(x, y, 1, 1);
}
function tratrata ( x , y)
{
ctx.translate(x, y);
console.log(ctx);
}
// Koniec fragmentu "pod Ajax".
</script>
</HEAD>
<BODY>
<div id="glowny">
<div id="menu">
<UL>
<LI>
<!------- tu mam "MENU" ------>
</LI><BR>
</UL>
</div>
<div id="naglowek">
</div>
<div id="zawartosc">
<canvas id='obrazuj' width='320' height='240' onmouseover="rysujWreszcie()"></canvas>
</div>
</div>
</BODY>
</HTML>
--- Koniec kodu ---
fand:
Kończąc "temat" i zapewniając, że dla 640/480 "też działa" podaję zawartość "roboczego źródła":
W załączniku "PrtScr"
( a mowa była o Meta danych Obrazów publikowanych pośród Internetu = jeżeli chcemy umiemy je opisać w komentarzach fotografii)
--- Kod: ---
<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="css/style1.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" />
<TITLE>Eko-Fand - Nowy Wygląd Strony</TITLE>
<meta name="keywords" content="myślenie ekologiczne, życie ekologiczne, polityka ekologiczna, ekonomia ekologiczna" />
<meta name="description" content="Eko-Fand - to blog publikujący artykuły na temat współczesnego życia w kontekście ekologicznym." />
<META NAME="GENERATOR" CONTENT="KWrite (Linux)">
<script language="JavaScript" type="text/javascript">
<?PHP
$linje = 394;
$dlugosc = 525;
$porcja = $dlugosc*4;
$naglowek = 54;
$bmp = file_get_contents("obrazy/moczary.bmp");
//$bmp = substr($bmp,54);
$bmp = strrev($bmp);
$bmp = substr($bmp,0,$linje*$porcja);
$lenperlin = strlen($bmp)/$linje;
print( "var liter = '" . $lenperlin . " liter'");
?>
function getXMLHTTPRequest ()
{
var reqest = false;
try
{
reqest = new XMLHttpRequest();
}catch(err1){
}
return reqest;
}
function rysujWreszcie(){
var canva = document.getElementById('obrazuj');
var ctx = canva.getContext('2d');
<?PHP
for($a=$linje-1; $a >=0 ; $a--) {
for($b=0 ; $b <=($dlugosc*4)-1; $b=$b+4){
print("ctx.fillStyle = 'rgba( ");
print(ord(chr(ord(substr($bmp,$a*$porcja+$b,1)))).", ");
print(ord(chr(ord(substr($bmp,$a*$porcja+$b+1,1)))).", ");
print( ord(chr(ord(substr($bmp,$a*$porcja+$b+2,1)))) . ", ");
print("1 )';\n");
print("ctx.fillRect(". ((($dlugosc)-(($b)/4))) .", ". ($a+1) .", 1, 1);\n");
}
}
?>
ctx.translate(525, 394);
}
function punktuj(r,g,b,x,y, ctx)
{
ctx.fillStyle = 'rgba(' + b + ',' + g + ',' + r + ', 1 )';
ctx.fillRect(x, y, 1, 1);
}
function tratrata ( x , y)
{
ctx.translate(x, y);
console.log(ctx);
}
</script>
</HEAD>
<BODY>
<div id="glowny">
<div id="menu">
<UL>
<LI>
<!------ Tu mam Menu --------->
</LI><BR>
</UL>
</div>
<div id="naglowek">
</div>
<div id="zawartosc">
<table width="777" cellpadding="4" cellspacing="0">
<col width="527">
<col width="250">
<tr valign="top">
<td width="527" style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm">
<canvas id='obrazuj' width='525' height='394' onclick="rysujWreszcie()"></canvas>
</td>
<td width="250" style="border: 1px solid #000000; padding: 0.1cm">
<font color="#00803f">
<P ALIGN=LEFT STYLE="margin-bottom: 0cm">Opublikowałem 20-tego Listopada 2017.</p>
</td>
</tr>
</table>
</div>
</div>
</BODY>
</HTML>
--- Koniec kodu ---
W kolejnych "etapach" doskonalenia "odkryłem", że GIMP potrzebuje dla stabilizacji kodu w "Zaawansowanych Opcjach Eksportu" do BMP wybrania opcji 32 bitowej zapisu pliku = czyli:
$porcja = 320*3
trzeba zastąpić:
$porcja = 320*4
z potomnymi konsekwencjami.
Nawigacja
Idź do wersji pełnej