Sobre este projeto
it-programming / web-development
Aberto
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
... leia mais 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. colapsar
Categoria TI e Programação
Subcategoria Programação
Qual é o alcance do projeto? Bug ou alteração pequena
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho especificações
Disponibilidade requerida Conforme necessário
Integrações de API Cloud Storage (Dropbox, Google Drive, etc), Outros (Outras APIs)
Funções necessárias Desenvolvedor
Prazo de Entrega: 27 de Setembro de 2024
Habilidades necessárias