elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: AIO elhacker.NET 2021 Compilación herramientas análisis y desinfección malware


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Libreria (Node o PHP) para codificar imagen dentro de QR
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Libreria (Node o PHP) para codificar imagen dentro de QR  (Leído 619 veces)
[u]nsigned


Desconectado Desconectado

Mensajes: 2.373

Vue SSr


Ver Perfil WWW
Libreria (Node o PHP) para codificar imagen dentro de QR
« en: 19 Abril 2020, 22:01 pm »

Hola, que queria preguntarles si saben de alguna libreria para NodeJs (o php) que permita guardar una imagen dentro de un codigo QR? He visto que es posible, pero no logro encontrar una libreria que haga eso. Estoy desarrollando una app y seria de gran utilidad poder meter ademas de un texto plano tambien una imagen dentro del QR.

He probado pasar la imagen a base64 y luego encodear todo al QR como si fuera texto plano, es pero muy ineficiente de esa forma. Y como acabo de ver que algunas librerias permiten trabajar directamente con datos binarios, queria saber si es posible meter la imagen mas algun texto de esa forma dentro de un QR.

Saludos y gracias por leer.  ::)


En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.217


Turn off the red ligth


Ver Perfil WWW
Re: Libreria (Node o PHP) para codificar imagen dentro de QR
« Respuesta #1 en: 20 Abril 2020, 00:49 am »

Miré la entrada de QR en Wikipedia y tiene aproximadamente unos 3kB de espacio. Que no es suficiente para una imagen normal.

Me imagino que no te sirve alojar una imagen online y poner la url de la imagen en el QR?

No veo una alternativa muy viable para solucionar el problema.
Usar base64 aún es peor porque te aumenta un 33% el tamaño de media.

https://www.npmjs.com/package/qr-image


En línea

engel lex
CoAdmin
***
Desconectado Desconectado

Mensajes: 15.347



Ver Perfil
Re: Libreria (Node o PHP) para codificar imagen dentro de QR
« Respuesta #2 en: 20 Abril 2020, 00:53 am »

toma en cuenta que por muy comprimida que esté la imagen la misma tiene una cantidad de informacion por pixel que es de 3 veces 8 bits (de 0 a 255 por color, siendo 3 colores) el QR puede contener 1 bit por pixel, siendo los pixeles de tamaño lo suficientemente grandes para ser visibles, a eso sumale estructuras de control y redundancias de seguridad...

es decir tu resultado tendrá mas tamaño y complejidad que la imagen original
En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
[u]nsigned


Desconectado Desconectado

Mensajes: 2.373

Vue SSr


Ver Perfil WWW
Re: Libreria (Node o PHP) para codificar imagen dentro de QR
« Respuesta #3 en: 20 Abril 2020, 19:04 pm »

Muchas gracias a ambos, me han aclarado todas las dudas que tenia sobre QR.  Supongo que es inviable entonces, ya se me hacia demasiado bueno para ser verdad....
En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
EdePC
Colaborador
***
Desconectado Desconectado

Mensajes: 1.485



Ver Perfil
Re: Libreria (Node o PHP) para codificar imagen dentro de QR
« Respuesta #4 en: 20 Abril 2020, 22:13 pm »

Saludos,

- Si te refieres a convertir una imagen tal cual en QR, pues no es dable más que nada porque el tamaño y complejidad del QR aumenta dependiendo a la cantidad de bytes de entrada.

- Por otro lado si que puedes abusar de la corrección de errores que trae QR para modificar la apariencia del QR de tal manera que se pueda incrustar una imagen visual en el, por ejemplo:



- Puedo resalta https://www.qrcode-monkey.com/es para generar QR OnLine

- En caso de PHP y Node he visto que se utilizan:
http://phpqrcode.sourceforge.net/
https://github.com/soldair/node-qrcode
En línea

[u]nsigned


Desconectado Desconectado

Mensajes: 2.373

Vue SSr


Ver Perfil WWW
Re: Libreria (Node o PHP) para codificar imagen dentro de QR
« Respuesta #5 en: 20 Abril 2020, 23:19 pm »

Muchas gracias por el aporte!

Lo que yo necesitaba era meterla dentro del código qr como información, cosa que no se puede lamentablemente....
En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
engel lex
CoAdmin
***
Desconectado Desconectado

Mensajes: 15.347



Ver Perfil
Re: Libreria (Node o PHP) para codificar imagen dentro de QR
« Respuesta #6 en: 21 Abril 2020, 00:28 am »

Muchas gracias por el aporte!

Lo que yo necesitaba era meterla dentro del código qr como información, cosa que no se puede lamentablemente....


Imagina que lo que tu estás pidiendo es tomar el texto de una hora y en una hoja identica escribir ese texto con unos y ceros como binario... necesitarías 8 hojas para completar el mismo texto... el problema es que el requisito del QR es que el limite es meter eso en lo que cabe un twitt, ya originalmente la tarea no era posible y al hacerla 8 veces mas larga, tus posibilidades eran mucho menores...
En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.217


Turn off the red ligth


Ver Perfil WWW
Re: Libreria (Node o PHP) para codificar imagen dentro de QR
« Respuesta #7 en: 21 Abril 2020, 16:31 pm »

Lo que podrías hacer es quizás un código más pequeño que genere una imagen de más mala calidad y abusar del navegador para ejecutarlo. Realmente nunca lo probé pero quizás se pueda.Me refiero a en lugar de poner:
https://google.com/favicon.ico


poner:
javascript:pintarHorizontalLineas("0-98", "azul");pintsrHorizontalLineas(99, "verde", "23-84"); ...


O quizás con un data:
data:text/html,<script>pintarHorizontalLineas("0-98", "azul");pintsrHorizontalLineas(99, "verde", "23-84"); ...</script>


Hay más formas, igual alguna te funciona.
Quizás puedas mezclar varias cosas: Simplificar las imágenes, reducirle el tamaño utilizando algoritmos de compresión para expandirla luego con código. Utilizar codificaciones óptimas como trabajar con caracteres ascii en lugar de su homólogo en bytes... Convertir colores muy similares en el mismo para mejorar la compresión a costa de calidad. Convertir imágenes a jpg de alta compresión y baja resolución...
También hay algoritmos para apartir de imágenes de baja calidad ampliarlas y mejorarlas.


Desde luego no es algo nimio, pero no es imposible hacer algo decente con mucho curro creo yo. Quizás incluso te podría rentar más aprovecharte de como leen los lectores de QR para juguetear con ello y que procese más info de la que hay.
 


Te dejo un script sencillo que hice para que no me copien imágnes. Le pones la url de una imagen, te extrae los píxeles y te la recrea con tags. A ti la parte que te interesa es la de extraer la imagen, meterla en el canvas y obtener los colores de los píxeles. A partir de ahí es cosa tuya representar la misma info con menos espacio.
Código
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>OCR</title>
  6. <script>
  7. /* SHORTCUTJS lib by StringManolo.
  8. Use of the global Scope to code faster, reduce file sizes, reduce memory usage and make some code more readable/compact. Readable Version */
  9. (function (){
  10. DEFINE=function(constant, value) {
  11. if(window[constant]===undefined) {
  12. window[constant] = value
  13. } else {
  14. throw new ReferenceError(constant + " is already a property of the global/window Object.\nRedefinition not allowed.");
  15. }
  16. }
  17.  
  18.  
  19. wrapQS=function(selector) {
  20. return d.querySelector(selector)
  21. }
  22.  
  23.  
  24. wrapQSA=function(selector) {
  25. return d.querySelectorAll(selector)
  26. }
  27.  
  28.  
  29. wrapAEL=function(elemnt, event, value) {
  30. elemnt.addEventListener(event, value);
  31. }
  32.  
  33.  
  34. wrapDCE=function(element) {
  35. return d.createElement(element);
  36. }
  37.  
  38.  
  39. wrapUCOU=function(url) {
  40. return URL.createObjectURL(url)
  41. }
  42.  
  43.  
  44.  
  45.  
  46. DEFINE("d", window.document);
  47. DEFINE("w", window);
  48. DEFINE("$", wrapQS);
  49. DEFINE("$$", wrapQSA);
  50. DEFINE("dw", d.write);
  51. DEFINE("_", window.alert);
  52. DEFINE("ael", wrapAEL);
  53. DEFINE("dce", wrapDCE);
  54. DEFINE("ucou", URL.createObjectURL);
  55.  
  56.  
  57. })();
  58. </script>
  59. </head>
  60. <body>
  61. <canvas id="canv" width="300" height="300"></canvas>
  62. <div id="output"></div>
  63. <!-- <a href="" id="a">click here to download your file</a> -->
  64. <style>
  65. canvas {
  66. background-color: blue;
  67. }
  68.  
  69.  
  70. body {
  71. background-color: #000;
  72. font-size: 2px;
  73. }
  74.  
  75.  
  76. span {
  77. padding: 0;
  78. letter-spacing: -1;
  79. }
  80.  
  81.  
  82. </style>
  83. <script>
  84. /* DOWNLOAD IMAGE CROSSORIGEN: (to avoid tainted canvas) */
  85. const request = fetch("https://cors-anywhere.herokuapp.com/" + prompt("Introduce URL de imagen. Ej: google.com/favicon.ico"));
  86. request.then(function(resp) {
  87. return resp.blob();
  88. }).then(function(blob) {
  89. let img = dce("img");
  90. const blobURL = ucou(blob);
  91. img.src = blobURL;
  92. img.id = "imagen";
  93. d.body.append(img);
  94. _("Imagen añadida");
  95. }).then(function(){
  96. ael($("#imagen"), "load", function(){LIIC()});
  97. }).catch(function(error) {
  98. _("Error: " + error);
  99. })
  100.  
  101.  
  102.  
  103.  
  104. /* LOAD IMAGE INTO CANVAS */
  105. function LIIC() {
  106. let canvas = $("#canv");
  107.  
  108.  
  109. let contexto = canvas.getContext("2d");
  110. let imagen = $("#imagen");
  111. canvas.width = imagen.width;
  112. canvas.height = imagen.height;
  113. contexto.drawImage(imagen,0,0);
  114.  
  115.  
  116. SacarPixeles();
  117.  
  118.  
  119. /* GET PIXELS IMAGE COLOR AND DRAW A IMAGE */
  120. function SacarPixeles(){
  121. let dataImagen = contexto.getImageData(0,0, canvas.width, canvas.height);
  122. _("Tamaño imagen data: " + dataImagen.data.length);
  123.  
  124.  
  125. let pixR =[], pixG =[], pixB =[], pixA =[];
  126.  
  127.  
  128.  
  129.  
  130. let k = "";
  131. for(var i =0, j =0; i < dataImagen.data.length; i +=4, ++j) {
  132. k += "Colores pixel" +(j+1)+ ": Rojo=" +dataImagen.data[i]+" \nVerde=" +dataImagen.data[i+1]+" \nAzul=" +dataImagen.data[i+2]+" \nAlfa=" +dataImagen.data[i+3]+"\n\n\n";
  133. pixR[j] = dataImagen.data[i].toString(16);
  134. pixG[j] = dataImagen.data[1+i].toString(16);
  135. pixB[j] = dataImagen.data[2+i].toString(16);
  136. pixA[j] = dataImagen.data[3+i].toString(16);
  137. }
  138.  
  139.  
  140. performance = d.createDocumentFragment();
  141. for(var i=0; i < pixR.length; ++i) {
  142. var tdiv=dce("b");
  143. var tbr=dce("br");
  144. if(i % canvas.width == 0) {
  145. performance.appendChild(tbr);
  146. }
  147. /*
  148. &#9617;&#9618;&#9619;&#9608;
  149. */
  150. tdiv.innerHTML = "&#9619;";
  151. tdiv.style.color = "#"+pixR[i]+""+pixG[i]+""+pixB[i]+""+pixA[i]+"";
  152. performance.appendChild(tdiv);
  153. }
  154. _("Escribiendo...");
  155. $("#output").appendChild(performance);
  156.  
  157.  
  158. _("Imagen percorrida");
  159. _(k);
  160. k = "";
  161. }
  162.  
  163.  
  164.  
  165.  
  166. }
  167.  
  168.  
  169. </script>
  170. </body>
  171. </html>

« Última modificación: 21 Abril 2020, 16:40 pm por @XSStringManolo » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[SOLUCIONADO]problema al crear imagen con libreria GD
PHP
H4RR13R 0 875 Último mensaje 25 Febrero 2008, 21:29 pm
por H4RR13R
Problema con struct dentro de libreria « 1 2 »
Programación C/C++
dkmarley 10 6,487 Último mensaje 23 Julio 2010, 16:51 pm
por dkmarley
Libreria OpenCV Deteccion de cubo de rubik en imagen
Programación C/C++
W0lFy 0 2,707 Último mensaje 3 Diciembre 2010, 20:52 pm
por W0lFy
que libreria para... reconocimiento de imagen en c++???
Programación C/C++
nb248077 4 2,506 Último mensaje 10 Mayo 2016, 21:08 pm
por engel lex
Cómo ocultar un archivo dentro de una imagen para poderlo enviar por correo
Noticias
wolfbcn 0 1,072 Último mensaje 6 Febrero 2017, 18:31 pm
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines