<html>
<meta charset="utf-8">
<head>
<script src="js/wordcloud2.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="data/Data.js"></script>
</head>
<body onload="run(2000, 1000);">
<center>
<canvas id="canvas" class="canvas" style="display:block;" ondblclick="$filePicker.toggle();"></canvas>
<div id="html-canvas" class="canvas" style="display:none;"></div>
<input type="file" name="filePicker" accept="image/*" id="filein">
</center>
<script>
// Establecemos la transparencia del fondo de las letras...
var alphaBGWords = 22;
// Convertimos el JSON de Data.js en una lista para WordCloud...
var maxWords = 0; // Establecemos el número máximo de palabras, 0 para todas.
list = []; // Generamos una lista vacía...
// Por cada elemento en db hacemos una entrada (palabra, frecuencia) en la lista...
for (var i in db) {
// Guardamos el elemento...
list.push([db[i]["word"], db[i]["freq"]]);
// Salimos cuando lleguemos al máximo permitido (0 para todas)...
if (i == maxWords && maxWords != 0) break;
}
// Tomamos los elementos HTML que vamos a ocupar...
var $mainCanvas = $('#canvas');
var $htmlCanvas = $('#html-canvas');
var $filePicker = $('#filein');
$filePicker.hide();
// Creamos los elementos globales que vamos a ocupar...
var maskCanvas = null;
var img = new Image();
var url;
// Cuando se selecciona un archivo TODO: Que lo tome automáticamente...
$filePicker.on('change', function() {
var file = $filePicker[0].files[0];
if (!file) return;
url = window.URL.createObjectURL(file);
img.src = url;
$filePicker.hide();
});
// Cuando la imagen se cargue...
img.onload = function readPixels() {
// Destruimos URL
window.URL.revokeObjectURL(url)
// Creamos un nuevo canvas...
maskCanvas = document.createElement('canvas');
maskCanvas.width = img.width;
maskCanvas.height = img.height;
var ctx = maskCanvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
var imageData = ctx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
var newImageData = ctx.createImageData(imageData);
for (var i = 0; i < imageData.data.length; i += 4){
var alpha = imageData.data[i + 3];
//Si el alpha es menor que 128 (transparente) pero mayor que 10 (no es fondo)...
if (alpha < 128 && alpha > 10 ){
// Dibujamos, lo marcamos de negro y sin transparencia...
newImageData.data[i] = newImageData.data[i + 1] = newImageData.data[i + 2] = 0;
newImageData.data[i + 3] = 255;
}else{
// No dibujamos y lo pintamos de blanco y transparente en la máscara...
newImageData.data[i] = newImageData.data[i + 1] = newImageData.data[i + 2] = 255;
newImageData.data[i + 3] = 0;
}
}
ctx.putImageData(newImageData, 0, 0);
run(img.width, img.height);
};
var run = function run(imgWidth, imgHeight) {
console.log("voy");
// Set the width and height
var cScale = 0.8;
// Obtenemos la resolución del navegador...
var navWidth = window.innerWidth;
var navHeight = window.innerHeight;
// Ajustamos la imagen para que entre en el navegador...
var wScale = (navWidth / imgWidth);
var hScale = (navHeight / imgHeight);
if(wScale > hScale){
imgWidth = (imgWidth*hScale*cScale);
imgHeight = (imgHeight*hScale*cScale);
}else{
imgWidth = (imgWidth*hScale*cScale);
imgHeight = (imgHeight*hScale*cScale);
}
$mainCanvas.attr('width', imgWidth);
$mainCanvas.attr('height', imgHeight);
$htmlCanvas.css({'width': imgWidth + 'px', 'height': imgHeight + 'px'});
if (maskCanvas){
var maskCanvasScaled = document.createElement('canvas');
maskCanvasScaled.width = $mainCanvas[0].width;
maskCanvasScaled.height = $mainCanvas[0].height;
var ctx = maskCanvasScaled.getContext('2d');
ctx.drawImage(maskCanvas, 0, 0, maskCanvas.width, maskCanvas.height, 0, 0, maskCanvasScaled.width, maskCanvasScaled.height);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var newImageData = ctx.createImageData(imageData);
// Creamos un nuevo canvas...
var oImgCanvas = document.createElement('canvas');
oImgCanvas.width = $mainCanvas[0].width;
oImgCanvas.height = $mainCanvas[0].height;
var oIctx = oImgCanvas.getContext('2d');
oIctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, oImgCanvas.width, oImgCanvas.height);
var oIData = oIctx.getImageData(0, 0, canvas.width, canvas.height);
for (var i = 0; i < imageData.data.length; i += 4){
if (imageData.data[i + 3] > 128){
// Donde SI podemos poner palabras...
newImageData.data[i] = oIData.data[i];
newImageData.data[i + 1] = oIData.data[i+1];
newImageData.data[i + 2] = oIData.data[i+2];
newImageData.data[i + 3] = alphaBGWords;
}else{
// Donde NO podemos poner palabras...
newImageData.data[i] = oIData.data[i];
newImageData.data[i + 1] = oIData.data[i+1];
newImageData.data[i + 2] = oIData.data[i+2];
newImageData.data[i + 3] = oIData.data[i+3];
}
}
ctx.putImageData(newImageData, 0, 0);
ctx = $mainCanvas[0].getContext('2d');
ctx.drawImage(maskCanvasScaled, 0, 0);
maskCanvasScaled = ctx = imageData = newImageData = oImgCanvas = oIctx = oIData = undefined;
}else{
var maskCanvasScaled = document.createElement('canvas');
maskCanvasScaled.width = $mainCanvas[0].width;
maskCanvasScaled.height = $mainCanvas[0].height;
var ctx = maskCanvasScaled.getContext('2d');
var newImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (var i = 0; i < newImageData.data.length; i += 4){
// Donde SI podemos poner palabras...
newImageData.data[i] = 255;
newImageData.data[i + 1] = 255;
newImageData.data[i + 2] = 255;
newImageData.data[i + 3] = alphaBGWords;
}
ctx.putImageData(newImageData, 0, 0);
ctx = $mainCanvas[0].getContext('2d');
ctx.drawImage(maskCanvasScaled, 0, 0);
maskCanvasScaled = ctx = imageData = newImageData = undefined;
}
WordCloud([$mainCanvas[0], $htmlCanvas[0]], { list: list,
gridSize: 2,
weightFactor: 4,
clearCanvas: false,
rotateRatio: 1,
shuffle: false,
alphaBGWords: alphaBGWords
// fontFamily: 'Impact, serif',
// color: '#000',
// backgroundColor: '#fff',
// rotationSteps: 10,
// ellipticity: 1}
}
);
};
</script>
</body>
</html>