I am making a google apps script in which you give an image link and the desired width and height, takes the center color of the division, and puts it as the background color of the corresponding cell. I believe everything should be fine, but my color data is apparently not reaching my main function.
Honestly I’m new to this and not sure what is wrong. If I’m completely genuine, I took a good chunk of this code from Bing Copilot. Anyways, here’s the code.
Code.gs
function onOpen() {
const ui = SpreadsheetApp.getUi();
ui.createMenu('My Tools')
.addItem('Rickroll', 'storePixelData')
.addToUi();
}
function storePixelData(pixelData) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var widthDivisions = 25;
var heightDivisions = 21;
for (var y = 0; y < heightDivisions; y++) {
for (var x = 0; x < widthDivisions; x++) {
var color = pixelData[y][x];
var hexColor = rgbToHex(color[0], color[1], color[2]);
sheet.getRange(y + 1, x + 1).setBackground(hexColor);
}
}
}
function rgbToHex(r, g, b) {
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
}
Rickroll.html (hehe)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<canvas id="canvas" style="display:none;"></canvas>
<script>
function processImage(imageUrl, widthDivisions, heightDivisions) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = imageUrl;
img.onload = () => {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = img.width;
const height = img.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
const pixelData = [];
const widthStep = width / widthDivisions;
const heightStep = height / heightDivisions;
for (let y = 0; y < heightDivisions; y++) {
const row = [];
for (let x = 0; x < widthDivisions; x++) {
const centerX = Math.floor((x + 0.5) * widthStep);
const centerY = Math.floor((y + 0.5) * heightStep);
const imageData = ctx.getImageData(centerX, centerY, 1, 1).data;
const r = imageData[0];
const g = imageData[1];
const b = imageData[2];
row.push([r, g, b]);
}
pixelData.push(row);
}
resolve(pixelData);
};
img.onerror = reject;
});
}
document.addEventListener('DOMContentLoaded', () => {
const imageUrl = 'https://ibb.co/LC5B9Nj'; // Replace with image URL
processImage(imageUrl, 25, 21).then(pixelData => {
google.script.run.withSuccessHandler(() => {
google.script.host.close();
}).storePixelData(pixelData);
}).catch(error => {
console.error('Error processing image:', error);
});
});
</script>
</body>
</html>
Specifically, the error it gives me is an undefined error in this line:
var color = pixelData[y][x];