Forum Linux.pl

Programowanie => Inne => Wątek zaczęty przez: fand w 2017-11-16, 15:55:02

Tytuł: o JavaScrypt ... i zabezpieczeniu Autorstwa "obrazów"
Wiadomość wysłana przez: fand w 2017-11-16, 15:55:02
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.
Tytuł: Odp: o JavaScrypt ... i zabezpieczeniu Autorstwa "obrazów"
Wiadomość wysłana przez: 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?
Tytuł: Odp: o JavaScrypt ... i zabezpieczeniu Autorstwa "obrazów"
Wiadomość wysłana przez: fand w 2017-11-19, 11:56:46
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?

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 (http://eko-fand.pl/layout.php)


[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]

<div id="zawartosc">
<canvas id='obrazuj' width='490' height='300'  onmouseover="rysujWreszcie()"></canvas>
</div>


Oto kod wynikły z "PHP":
Ocywiście Ajax będzie zawierać tablicę "buforującą" i funkcję z "pętlą"...

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);
}



 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:
 $bmp = substr($bmp,(390-$linje)*$porcja);
  $bmp = strrev($bmp);



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)

<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>
Tytuł: Odp: o JavaScrypt ... i zabezpieczeniu Autorstwa "obrazów"
Wiadomość wysłana przez: fand w 2017-11-20, 14:46:23
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)

<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>



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.