Analisando propostas

Cooreção de código

Publicado em 27 de Setembro de 2024 dias na TI e Programação

Sobre este projeto

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 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.

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

Outro projetos publicados por L. A. N.