Tenho um pequeno projeto e tenho a estrutura criada, porém por algum motivo que não consigo resolver. É Um programa para sobrepor imagens em .png
Preciso criar um produto com sobreposição de imagem do AppSheet.
Imediatamente pensei em chamar um script AppScript listando as imagens no formato .png e salvando a imagem de sobreposição. No entanto, o script de imagem não é suportado diretamente, então tenho que chamar o HTML.
A ideia é esta:
Abaixo, inseri uma suposta composição de imagens. Elas são representativas de uma calça, onde há modelos da cintura, do tipo de bolso e do fundo, da parte da frente da calça:
arquivos anexos
assim tenho:
**
codigo.gs**
function testOverlayImages() {
try {
// Manually input your test file IDs and output folder ID
var fileIds = ['12dNuA7z0HpwjjEWQqk_Ka11gRlZXg9gm',
'12aGTgwgQFS1FvBK-o1-H_lx7K_lIUVxF',
'1JYBKj80vA_sJ-yIHcww308G9FqIWmFqK',
'1HaDk5r1xIRqR3RwE-vCxrNDiUvuO3MNs',
'1IeEce1cygeexeS1CspISszPyKpvPtnce'
];
var outputFolderId = "11mipFucwgcW0Vlei9dseMwVwglHtYJOe"; // Replace with your Google Drive folder ID where the result will be saved
// Get the images by their file IDs
var images = getImagesByIds(fileIds);
// Create the HTML page for overlaying images
var template = HtmlService.createTemplateFromFile('Overlay');
template.images = images; // Pass images to the HTML template
template.outputFolderId = outputFolderId; // Pass the output folder id to the html template
var html = template.evaluate().getContent();
// Return the HTML page to the client to process the overlay
return ContentService.createTextOutput(html).setMimeType(
ContentService.MimeType.HTML);
} catch (error) {
// Return error response if something goes wrong
return ContentService.createTextOutput(JSON.stringify({
status: 'error',
message: error.message
})).setMimeType(
ContentService.MimeType.JSON);
}
}
// Function to get images by their file IDs
function getImagesByIds(fileIds) {
var images = [];
for (var i = 0; i <
fileIds.length; i++) {
var file = DriveApp.getFileById(fileIds[i]);
if (file.getMimeType() == "image/png") {
var imageBlob = file.getBlob();
var base64Image = Utilities.base64Encode(imageBlob.getBytes());
var dataUri = "data:image/png;base64," + base64Image;
images.push(dataUri);
}
}
return images;
}
// Save the overlaid image to Google Drive
function saveImage(base64Image, folderId) {
Logger.log('Saving image to folder: ' + folderId); // Log the folder ID
Logger.log('Base64 image: ' + base64Image.substring(0, 100)); // Log part of the Base64 string (first 100 characters)
// Decode the base64 image
var blob = Utilities.newBlob(Utilities.base64Decode(base64Image.replace(/^data:image\/png;base64,/, "")), 'image/png', '
overlay_image.png');
// Get the folder by folderId
var folder = DriveApp.getFolderById(folderId);
// If the folder doesn't exist, log an error
if (!folder) {
Logger.log('Folder not found!');
return 'Folder not found!';
}
// Create the file in the folder
var file = folder.createFile(blob);
// Log the created file's URL
Logger.log('File created: ' +
file.getUrl());
// Return the URL of the saved file
return
file.getUrl();
}
**
Overlay.html**
<!DOCTYPE html>
canvas {
border: 1px solid black;
}
<h1>Overlaying Images</h1>
<script>
// Images and the output folder id passed from the server
var images = <?= json.stringify(images) ?>;
var outputFolderId = "<?= outputFolderId ?>"; // Get the output folder ID from the Apps Script
function overlayImages() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Load the first image to set canvas dimensions
var img1 = new Image();
img1.src = images[0];
img1.onload = function() {
canvas.width =
img1.width;
canvas.height =
img1.height;
ctx.drawImage(img1, 0, 0); // Draw the first image
// Overlay subsequent images
for (let i = 1; i <
images.length; i++) {
let img = new Image();
img.src = images[i];
img.onload = function() {
ctx.drawImage(img, 0, 0); // Overlay the current image
};
}
// After all images are drawn, convert to Base64 and send back to the server
setTimeout(function() {
var base64Image = canvas.toDataURL("image/png");
console.log('Generated Base64 image:', base64Image.substring(0, 100)); // Log the first 100 characters
google.script.run.withSuccessHandler(function(url) {
alert('Image saved! You can access it here: ' + url);
}).saveImage(base64Image, outputFolderId); // Use the outputFolderId when saving the image
}, 10000); // Allow time for all images to load and overlay
};
}
// Start the overlay process
overlayImages();
</script>
Abaixo está um exemplo da imagem de sobreposição. Esta imagem deve ser salva em uma pasta específica. Overlay_image
Alguém pode me ajudar onde estou errando?
Eu esperava que, chamando a função por meio do script, eu pudesse salvar a imagem sobreposta. Eu inseri as imagens para que eu pudesse entender melhor a sobreposição, mas não consigo salvá-las.
Delivery term: September 27, 2024