Сохранить большой элемент canvas как изображение png на сервере - PullRequest
Новая
       31

Сохранить большой элемент canvas как изображение png на сервере

0 голосов
/ 16 января 2020

У меня проблема с сохранением большого холста в виде изображения png на моем локальном хосте. Если данные небольшие, как до 50 МБ. мой код работает, когда файл больше, сайт разрушает. При таком подходе, использующем toDataURL и кодировку base64, если есть другой способ быстрой отправки и сохранения на сервер файлов размером 200–500 МБ, поделитесь своими знаниями. У меня вопрос, как я могу сохранить большой элемент холста на сервер. Мой код, который работает для небольших файлов ... O и я использую p5 js для масштабирования холста до 12000x12000 ...

на стороне сервера 

const fs = require("fs");

stand1.post('/', urlencodedParser, function(req, res){
        const base64Data = req.body.imgBase64;
      fs.writeFile('aaa.png', base64Data, 'base64', function(error) {
        if (error){
          return res.send('SEND FILE ERROR'); // finish the request in error case 
        }
    });
});

script 

   <script>
  const button1 = document.getElementById('saveImg');
   button1.addEventListener('click',async event =>{
     output.loadPixels();
     var dataURL = output.canvas.toDataURL();
      var img = dataURL.replace(/^data:image\/png;base64,/, "");
     $.ajax({
      type: "POST",
      url: "/",
      data: { imgBase64: img}
      })
      .done(function() {console.log('FILE IS SAVED');});

   });
   </script>

Я пытался отправить файл в виде BLOB-объекта, и когда я консоль регистрирую его на стороне сервера, он появляется как объект, не знаю, как его сохранить ... код для сохранения и отправить как blob ... Мой другой вопрос - как отправить файл, чтобы сохранить производительность, потому что, когда я отправляю эти большие файлы, не важно, как мое использование процессора составляет 100% ...

Blob 

<script>
  const button1 = document.getElementById('saveImg');
   button1.addEventListener('click', event =>{
     output.loadPixels();
      var dataURI = output.canvas.toDataURL();
      var byteString = atob(dataURI.split(',')[1]);
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      var arrayBuffer = new ArrayBuffer(byteString.length);
      var _ia = new Uint8Array(arrayBuffer);
        for (var i = 0; i < byteString.length; i++) {
            _ia[i] = byteString.charCodeAt(i);
        }
      var dataView = new DataView(arrayBuffer);
      var blob = new Blob([dataView], { type: mimeString });
   console.log(blob);


   });

   </script>

Пожалуйста, помогите ...

...