On my UI where I have open source project, https://github.com/townsean/canvas-pixel-color-counter
so what I am trying to do is :-
I want to export HTML data into excel,all input div count data, earlier I was using exporting to excel plugin but it is only exporting the HTML table data not input fields data
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ashley G">
<meta name="description" content="A web app that counts the number of pixels in an image per a unique color.">
<title>Pixel Color Counter</title>
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<button onclick="exportTableToExcel('tblData')">Export Table Data To Excel File</button>
</head>
<body>
<header>
<h1>Pixel Color Counter</h1>
</header>
<main>
<!-- About Section -->
<section id="about">
<h2>Count Pixels by Color</h2>
<p>Pixel Color Counter is vanilla JS web application that accepts an image file (selected by the user) and displays the total number of pixels per a unique color. </p>
</section>
<!-- Upload Image Section -->
<section id="upload-container">
<h2>Upload an Image</h2>
<div>
<label for="image">Choose an image:</label>
<input type="file" id="image" name="image" accept="image/png, image/jpeg">
</div>
<canvas id="canvas"></canvas>
</section>
<!-- Pixel Color Swatches and Count -->
<section id="pixel-count-container" class="pixel-count-container invisible">
<h2>Pixel Counts by Color</h2>
<p><span id="color-count"></span> unique colors</p>
<div id="color-swatches" class="color-swatches">
</div>
</section>
</main>
<div id="wait-indicator" class="invisible">
<img src="assets/ashley_sprite.gif">
<p>Please Wait</p>
</div>
<footer>
<a href="https://github.com/townsean/canvas-pixel-color-counter">Copyright © 2019 Ashley Grenon</a>
</footer>
<script src="counter.js"></script>
<script src="main.js"></script>
</body>
</html>
and jquery
and counter js this project
// https://developer.mozilla.org/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript
self.addEventListener("message", go);
/**
*
*/
function go(message) {
const imageData = message.data.imageData;
const colorCounts = countPixels(imageData);
self.postMessage({
"command": "done",
colorCounts
});
}
/**
* Counts the number of pixels per a unique color
* https://stackoverflow.com/questions/19499500/canvas-getimagedata-for-optimal-performance-to-pull-out-all-data-or-one-at-a
*/
function countPixels(data) {
const colorCounts = {};
for(let index = 0; index < data.length; index += 4) {
const rgba = `rgba(${data[index]}, ${data[index + 1]}, ${data[index + 2]}, ${(data[index + 3] / 255)})`;
if (rgba in colorCounts) {
colorCounts[rgba] += 1;
} else {
colorCounts[rgba] = 1;
}
}
return colorCounts;
}
and main.js
// To avoid Uncaught DOMException while using Web Workers
// Run python -m http.server 8000
// https://stackoverflow.com/questions/8170431/using-web-workers-for-drawing-using-native-canvas-functions
const worker = new Worker('./counter.js');
handleWorkerCompletion = (message) => {
if(message.data.command == "done") {
// draw color swatches
this.drawColorSwatch(message.data.colorCounts);
worker.removeEventListener("message", handleWorkerCompletion);
// hide wait indicator
const waitIndicator = document.getElementById("wait-indicator");
waitIndicator.classList.add("invisible");
waitIndicator.classList.remove("fadein");
// scroll to color swatch section
const pixelCountContainer = document.getElementById('pixel-count-container');
pixelCountContainer.scrollIntoView({ behavior: 'smooth'});
const colorCountLabel = document.getElementById('color-count');
colorCountLabel.innerText = Object.keys(message.data.colorCounts).length;
}
};
/**
* Event listener for when the file upload has been updated
*/
document.getElementById("image").addEventListener('change', (e) => {
this.loadImage(e.target.files[0]);
}, false);
/**
* Given a valid image file, load the image into the canvas
* Good explantation the the image data: https://css-tricks.com/manipulating-pixels-using-canvas/#article-header-id-1
*/
loadImage = (file) => {
const url = window.URL.createObjectURL(file);
const img = new Image();
img.src = url;
img.onload = () => {
this.reset();
const canvas = document.getElementById('canvas');
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
const uploadContainer = document.getElementById('upload-container');
uploadContainer.appendChild(img);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
window.URL.revokeObjectURL(this.src);
worker.addEventListener("message", handleWorkerCompletion, false);
worker.postMessage({
"imageData": imageData.data
});
const waitIndicator = document.getElementById("wait-indicator");
waitIndicator.classList.remove("invisible");
waitIndicator.classList.add("fadein");
}
};
/**
*
*/
drawColorSwatch = (colorCount) => {
let colorSwatches = document.getElementById('color-swatches');
for(const color in colorCount) {
const container = document.createElement("section");
const swatch = document.createElement("div");
const colorCountLabel = document.createElement("span");
container.classList.add("color-swatch-container");
swatch.classList.add("color-swatch");
swatch.style.background = color;
swatch.title = color;
colorCountLabel.innerHTML = `: ${colorCount[color]}`;
container.appendChild(swatch);
container.appendChild(colorCountLabel);
colorSwatches.appendChild(container);
}
let pixelCountContainer = document.getElementById('pixel-count-container');
pixelCountContainer.classList.remove('invisible');
};
/**
* Clear DOM of past color counting
*/
reset = () => {
let pixelCountContainer = document.getElementById('pixel-count-container');
pixelCountContainer.classList.add('invisible');
let colorSwatches = document.getElementById('color-swatches');
while (colorSwatches.firstChild) {
colorSwatches.removeChild(colorSwatches.firstChild);
}
let uploadContainer = document.getElementById('upload-container');
let image = uploadContainer.getElementsByTagName('img')[0];
if (image) {
uploadContainer.removeChild(image);
}
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}
function exportTableToExcel(color-swatches, filename = ''){
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(color-swatches);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xls':'excel_data.xls';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}
