Получить HTML Canvas в Google Spreadsheet

avatar
TheWizEd
19 февраля 2022 в 23:33
508
1
0

Я пытаюсь добавить холст HTML в таблицу Google. Я нашел простой блокнот, в котором используются только html, css и javascript. Я создаю собственный диалог и включаю в него блокнот. Это прекрасно работает. Теперь я хочу отправить в электронную таблицу Google. Что у меня есть до сих пор:

В моем HTML:

<canvas id="drawing-board"></canvas>

В моем <script>:

const canvas = document.getElementById('drawing-board');
var url = canvas.toDataURL("image/jpeg", 1.0);
google.script.run.receiveDataURL(url);

В Code.gs:

function receiveDataURL(url) {
  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sh = ss.getSheetByName("Sheet2");
    var blob = Utilities.newBlob(Utilities.base64Decode(url), 'image/jpg', 'MyImageName');
    sh.insertImage(blob,1,1);
  }
  catch(err) {
    console.log(err);
  }
}

Если я просто вставлю изображение(url,'image/jpg'), я получу черный ящик. Он должен быть белым с какими-то каракулями на нем.

Есть идеи?

Источник
TheWizEd
21 февраля 2022 в 02:21
0

Эта тема решена в этой теме. coderhelper.com/questions/71199292/…

I hope this is helpful to you
21 февраля 2022 в 09:17
0

Отвечает ли это на ваш вопрос? Как передать холст HTML из пользовательского диалогового окна в электронную таблицу Google

Ответы (1)

avatar
Tanaike
20 февраля 2022 в 02:00
1

Еще один ответ: метод "insertImage" может напрямую использовать URL-адрес данных. Итак, ваш скрипт можно изменить следующим образом.

Измененный скрипт:

function receiveDataURL(url) {
  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sh = ss.getSheetByName("Sheet2");
    sh.insertImage(url,1,1);
  }
  catch(err) {
    console.log(err);
  }
}

  • В качестве примера HTML и Javascript вы можете проверить это, используя следующий Javascript.

      <canvas id="drawing-board"></canvas>
  <script>
  const canvas = document.getElementById('drawing-board');
  canvas.width = 100;
  canvas.height = 50;

  // Sample rectangle image is put.
  const context = canvas.getContext("2d");
  context.beginPath();
  context.rect(0, 0, 100, 50);
  context.fillStyle = "#FF0000";
  context.fill();

  // Retrieve the data URL.
  var url = canvas.toDataURL("image/jpeg", 1.0);
  google.script.run.receiveDataURL(url);
  </script>
    • При запуске этого сценария красный прямоугольник помещается на «Лист2».

Артикул:

TheWizEd
20 февраля 2022 в 03:50
0

Я пробовал это, но я получил изображение, но это была коробка, заполненная черным

Tanaike
20 февраля 2022 в 05:05
0

@TheWizEd Спасибо за ответ. Я прошу прощения за неудобства. К сожалению, когда я проверял это, красный прямоугольник помещался на «Лист2». Так что я не могу повторить вашу ситуацию I tried that but I got an image but it was a box filled black. Это из-за моего слабого мастерства. Я глубоко извиняюсь за это. Но я хотел бы поддержать вас. Итак, можете ли вы предоставить весь свой сценарий для правильного воспроизведения проблемы? Этим я хотел бы подтвердить это. Если вы можете сотрудничать, чтобы решить вашу текущую проблему, я рад. Кроме того, я был бы признателен, если бы вы могли простить мое плохое мастерство.

TheWizEd
20 февраля 2022 в 13:29
0

Если я сделаю это context.rect(0, 0, 100, 50); context.stroke(); в диалоговом окне, я получу прямоугольник, но в электронной таблице я получу черный заполненный прямоугольник.

Rubén
20 февраля 2022 в 16:56
0

@TheWizEd Этот код отлично работает для меня. Пожалуйста, задайте новый вопрос, включая минимальный воспроизводимый пример.

TheWizEd
20 февраля 2022 в 18:28
0

@ Рубен, с кодом Танайке вы получаете заполненное поле, а не контур прямоугольника. Я заменяю context.rect(0, 0, 100, 50); context.stroke();, что дает прямоугольник в диалоговом окне, но заполненное поле в электронной таблице. Какой код работает для вас?

Rubén
20 февраля 2022 в 18:56
0

@TheWizEd Пожалуйста, задайте новый вопрос, включая минимальный воспроизводимый пример.

Tanaike
20 февраля 2022 в 23:55
1

@Rubén Спасибо за вашу постоянную поддержку. Когда я тестировал предложенный мной сценарий, снова красный прямоугольник помещался на «Лист2». К сожалению, я не могу повторить ситуацию TheWizEd I tried that but I got an image but it was a box filled black.

Tanaike
21 февраля 2022 в 00:13
0

@TheWizEd Из вашего комментария Рубену я понял, что предложенный мной сценарий работает в вашей среде. Если мое понимание неверно, можете ли вы предоставить весь сценарий для правильной репликации вашей текущей проблемы? Этим я хотел бы подтвердить это.

TheWizEd
21 февраля 2022 в 00:14
0

Не работает см. новую тему coderhelper.com/questions/71199292/…

Tanaike
21 февраля 2022 в 00:16
0

@TheWizEd Спасибо за ответ. Могу я спросить вас о причине, по которой вы не хотите решать свой вопрос? Если мой предложенный сценарий не работает в вашей среде, я должен извиниться. Можете ли вы в то же время предоставить весь свой сценарий для правильной репликации вашей текущей проблемы? Этим я хотел бы подтвердить это. Я думал, что когда вы используете сложный скрипт, я рекомендовал протестировать его как простой скрипт. Я глубоко извиняюсь за свое предложение.

TheWizEd
21 февраля 2022 в 00:18
0

Пожалуйста, смотрите новую тему. Ваш ответ не решает эту проблему.

Tanaike
21 февраля 2022 в 00:23
0

@TheWizEd Спасибо за ответ. Насчет Please see the new thread. Your answer does not resolve this problem., я глубоко извиняюсь за свои плохие навыки и плохое знание английского языка. Когда я тестировал предложенный мной сценарий, проблем не возникало. Это из-за моего слабого мастерства. Если мой предложенный сценарий не решил вашу проблему, можете ли вы предоставить весь сценарий для правильного воспроизведения вашей проблемы? Я сказал это из моего 1-го ответа. Когда вы можете сотрудничать, чтобы решить вашу проблему, я рад. Можете ли вы сотрудничать, чтобы сделать это? Я глубоко извиняюсь, что я хотел решить ваш этот вопрос.

TheWizEd
21 февраля 2022 в 00:41
0

Рубен попросил меня создать новую тему, поэтому, пожалуйста, перейдите сюда, чтобы продолжить обсуждение, спасибо coderhelper.com/questions/71199292/…

Tanaike
21 февраля 2022 в 00:43
0

@TheWizEd Спасибо за ответ. Могу я подтвердить ваше направление? Судя по вашему ответу, вы не хотите решать этот вопрос. Правильно ли я понимаю?

TheWizEd
21 февраля 2022 в 00:54
0

Да, но Рубен постоянно просит меня открыть новую тему. Ваш код у меня не работает. Пожалуйста, попробуйте это, измените свой код context.fillStyle = "#FF0000"; context.fill(); на этот context.stroke(); и сообщите мне, если вы получите правильное изображение в электронной таблице.

Tanaike
21 февраля 2022 в 00:57
0

@TheWizEd Спасибо за ответ. Я должен извиниться за свое слабое мастерство. К сожалению, из вашего ответа я не могу представить ваш текущий сценарий, используя предложенный мной сценарий. Потому что, когда я тестировал предложенный мной сценарий, проблем не возникало. В связи с этим я должен извиниться за свое слабое мастерство. Но я хотел бы поддержать вас и решить этот вопрос. Итак, можете ли вы предоставить свой сценарий для правильной репликации вашей проблемы? Этим я хотел бы подтвердить это. Я продолжаю говорить это из моего 1-го ответа. Я глубоко извиняюсь за это. Кстати, если вы не понимаете мой английский, скажите, пожалуйста.

Tanaike
21 февраля 2022 в 01:49
0

@TheWizEd Кстати, из Ruben asked me to start a new thread so please go here to continue the discussion thanks coderhelper.com/questions/71199292/… я предложил ответ на ваш новый вопрос. Не могли бы вы подтвердить это? Если вы все еще хотите решить свой этот вопрос, я хотел бы поддержать вас. В то же время вы можете предоставить свой сценарий для правильного воспроизведения вашей проблемы? Этим я хотел бы подтвердить это.