|
App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Curso de App inventor 2 en español - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
___________________________
169Y.- JavaScript. Fondo transparente. Extensión Base64. Convertir a tonos grises.
 p169Y_javascript_transparente.aia
- Mediante JavaScript vamos a convertir un color de una imagen en transparente.
- Para hacer las pruebas utilizaremos imágenes de QR, cuyos colores son blanco (255,255,255) y negro (0,0,0).
- Para convertir la imagen en Base64 desde la aplicación, utilizaremos mi extensión com.KIO4_Base64.aix
- Establecemos el color mediante Deslizadores blanco (255,255,255) y negro (0,0,0). Pulsamos el bótón correspondiente.
- Enviamos la imagen en forma de string as código de JavaScript, además también enviamos el color que queremos hacer transparente.
- Es decir, enviamos el string en Base64#255#255#255
- Utilizaré el # como delimitador.
- El código de JavaScript convertirá al color: #255#255#255 en transparente.
- Y devolverá la imagen mediante otro string:
result = canvas.toDataURL().replace('data:image/png;base64,','');
window.AppInventor.setWebViewString("" + result); // SALIDA APP INVENTOR
- Además subiremos este archivo:
|
transparente.html |
<!DOCTYPE HTML><html><head>
<!-- Code from https://jsfiddle.net/hppgLkfg/1/ -->
<!-- Modified by Juan A. Villalpando - http://kio4.com/appinventor/169Y_javascript_transparente.htm -->
</head>
<body>
<img src= "" id="code">
<script type="text/javascript">
data = window.AppInventor.getWebViewString().split("#"); // ENTRADA APP INVENTOR.
base64 = data[0];
red = data[1];
green = data[2];
blue = data[3];
document.getElementById('code').setAttribute('src', base64);
var el = document.getElementById('code');
var canvas = document.createElement('canvas');
canvas.setAttribute('width', 250);
canvas.setAttribute('height', 250);
var context = canvas.getContext("2d");
context.drawImage(el, 0, 0, canvas.width, canvas.height);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var preserveColor = function(imageData, color) {
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var preserve = data[i] === color.r
&& data[i + 1] === color.g
&& data[i + 2] === color.b
&& data[i + 3] === color.a;
data[i + 3] = preserve ? data[i + 3] : 0;
}
return imageData;
};
var newData = preserveColor(imageData, {r: parseInt(red), g: parseInt(green), b: parseInt(blue), a: 255});
context.putImageData(newData, 0, 0);
document.body.appendChild(canvas);
result = canvas.toDataURL().replace('data:image/png;base64,','');
window.AppInventor.setWebViewString("" + result); // SALIDA APP INVENTOR
</script>
</body>
</html>
|
________________________________
- Diseño.
________________________________
- Bloques.
________________________________
________________________________
________________________________
________________________________
2.- Convertir imagenes en color a tonos grises.
p169Y_javascript_gris.aia
- Siguiendo el método que acabamos de ver, vamos a convertir una imagen en color a tonos grises.
- Nos basaremos es este código:
https://www.quora.com/Whats-the-most-common-way-to-edit-images-with-JavaScript
|
gris.html |
<!DOCTYPE HTML><html><head>
<!-- Code from https://www.quora.com/Whats-the-most-common-way-to-edit-images-with-JavaScript -->
<!-- Modified by Juan A. Villalpando - http://kio4.com/appinventor/169Y_javascript_transparente.htm -->
</head>
<body>
<img src= "" id="code">
<script type="text/javascript">
data = window.AppInventor.getWebViewString().split("#"); // ENTRADA APP INVENTOR.
base64 = data[0];
WIDTH = data[1];
HEIGHT = data[2];
document.getElementById('code').setAttribute('src', base64);
var inputImage = document.getElementById('code');
var canvas = document.createElement('canvas');
canvas.setAttribute('width', parseInt(WIDTH));
canvas.setAttribute('height', parseInt(HEIGHT));
var context = canvas.getContext("2d");
context.drawImage(inputImage, 0, 0, canvas.width, canvas.height);
surface = context.getImageData(0, 0, canvas.width, canvas.height);
///////// START CODE FOR GREY SCALE //////////
//Once you have the ImageData object you can to all your editing
for (let y = 0; y != surface.height; y++) {
for (let x = 0; x != surface.width; x++) {
//Remember this formula!
//i = (y * width + x) * depth
let i = (y * surface.width + x) * 4;
//compute the average of RGB components
let intensity = (
surface.data[i + 0] +
surface.data[i + 1] +
surface.data[i + 2]
) / 3;
//set the RGB components to the average. Each component
//has the same value so it is a shade of gray
surface.data[i + 0] = intensity;
surface.data[i + 1] = intensity;
surface.data[i + 2] = intensity;
}
}
///////// END CODE FOR GREY SCALE //////////
/**
/////////// START CODE FOR INVERT COLOR //////////
for (var i = 0; i < surface.data.length; i += 4) {
surface.data[i] = 255 - surface.data[i]; // red
surface.data[i + 1] = 255 - surface.data[i + 1]; // green
surface.data[i + 2] = 255 - surface.data[i + 2]; // blue
}
///////// END CODE FOR INVERT COLOR ///////////
*/
//Now you can put it back onto the canvas
context.putImageData(surface, 0, 0);
//From the canvas you can create a data URL
//let url = canvas.toDataURL();
result = canvas.toDataURL().replace('data:image/png;base64,','');
window.AppInventor.setWebViewString("" + result); // SALIDA APP INVENTOR
</script>
</body>
</html>
|
________________________________
- Diseño.
________________________________
- Bloques.
________________________________
________________________________
________________________________
________________________________
3.- Cambio de colores.
p169Y_javascript_colores.aia
- Cambia todo el tono de un color.
|
colores.html |
<!DOCTYPE HTML><html><head>
<!-- Juan A. Villalpando - http://kio4.com/appinventor/169Y_javascript_transparente.htm -->
</head>
<body>
<img src= "" id="code">
<script type="text/javascript">
datos = window.AppInventor.getWebViewString().split("#"); // ENTRADA APP INVENTOR.
base64 = datos[0];
RED = datos[1];
GREEN = datos[2];
BLUE = datos[3];
color = datos[4];
document.getElementById('code').setAttribute('src', base64);
var inputImage = document.getElementById('code');
var canvas = document.createElement('canvas');
canvas.setAttribute('width', parseInt(200));
canvas.setAttribute('height', parseInt(250));
var context = canvas.getContext("2d");
context.drawImage(inputImage, 0, 0, canvas.width, canvas.height);
surface = context.getImageData(0, 0, canvas.width, canvas.height);
/////////// START CODE FOR COLOR //////////
if (color == 'r'){
for (var i = 0; i < surface.data.length; i += 4) {
surface.data[i] = parseInt(RED); // red
}
}
if (color == 'g'){
for (var i = 0; i < surface.data.length; i += 4) {
surface.data[i + 1] = parseInt(GREEN); // green
}
}
if (color == 'b'){
for (var i = 0; i < surface.data.length; i += 4) {
surface.data[i + 2] = parseInt(BLUE); // blue
}
}
///////// END CODE FOR COLOR ///////////
//Now you can put it back onto the canvas
context.putImageData(surface, 0, 0);
//From the canvas you can create a data URL
//let url = canvas.toDataURL();
result = canvas.toDataURL().replace('data:image/png;base64,','');
window.AppInventor.setWebViewString("" + result); // SALIDA APP INVENTOR
</script>
</body>
</html>
|
________________________________
- Diseño.
________________________________
- Bloques.
________________________________
________________________________
________________________________
________________________________
4.- Pixelado de imagen.
p169Y_javascript_pixelado.aia
- Pixelado de imagen.
|
pixelado.html |
<!DOCTYPE HTML><html><head>
<!-- https://stackoverflow.com/questions/40833640/pixelate-image-in-node-js -->
<!-- Juan A. Villalpando - http://kio4.com/appinventor/169Y_javascript_transparente.htm -->
</head>
<body>
<img src= "" id="code">
<script type="text/javascript">
datos = window.AppInventor.getWebViewString().split("#"); // ENTRADA APP INVENTOR.
base64 = datos[0];
pixelation = parseInt(datos[1]);
document.getElementById('code').setAttribute('src', base64);
var inputImage = document.getElementById('code');
var canvas = document.createElement('canvas');
canvas.setAttribute('width', parseInt(200));
canvas.setAttribute('height', parseInt(250));
var context = canvas.getContext("2d");
context.drawImage(inputImage, 0, 0, canvas.width, canvas.height);
surface = context.getImageData(0, 0, canvas.width, canvas.height);
sourceWidth = canvas.width;
sourceHeight = canvas.height;
var data = surface.data;
for(var y = 0; y < sourceHeight; y += pixelation) {
for(var x = 0; x < sourceWidth; x += pixelation) {
var red = data[((sourceWidth * y) + x) * 4];
var green = data[((sourceWidth * y) + x) * 4 + 1];
var blue = data[((sourceWidth * y) + x) * 4 + 2];
for(var n = 0; n < pixelation; n++) {
for(var m = 0; m < pixelation; m++) {
if(x + m < sourceWidth) {
data[((sourceWidth * (y + n)) + (x + m)) * 4] = red;
data[((sourceWidth * (y + n)) + (x + m)) * 4 + 1] = green;
data[((sourceWidth * (y + n)) + (x + m)) * 4 + 2] = blue;
}
}
}
}
}
context.putImageData(surface, 0, 0);
result = canvas.toDataURL().replace('data:image/png;base64,','');
window.AppInventor.setWebViewString("" + result); // SALIDA APP INVENTOR
</script>
</body>
</html>
|
________________________________
- Diseño.
________________________________
- Bloques.
__________________________________
|
