Блог

Я получаю сообщение об ошибке:

 "Domado: canvas drawImage not yet implemented"
  

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

Вот код HTML и Javascript, который работает и делает то, что я хочу. Тот же код не будет работать в службе Apps Script HTML.

HTML

 <button onmouseup="fncDrawNewImage()">Put Image Into Canvas</button>
<span style='color:red'>NOTE: Large Image.  Scroll Down to see New Image<span>
    <br/>
    <br>
<img id='rawUploadImg' src="https://c63b5816896b8b38120d71a4eb99978894a5ef14.googledrive.com/host/0B52YKjuEE44ySkhPUTBsbW5sSWM/F28_003537_KPQQAPSQQQQQT0Bw_A.JPG">
<canvas id="cnvsForFormat" width="400" height="226"></canvas>
  

JavaScript

 window.fncDrawNewImage = function () {
    window.img = document.getElementById("rawUploadImg");
    var cnvs = document.getElementById("cnvsForFormat");
    var ctx = cnvs.getContext("2d");
    cnvs.style.border = "1px solid #c3c3c3";
    ctx.drawImage(img, 0, 0, 400, 226);
};
  

jsFiddle помещает IMG в ХОЛСТ с помощью drawImage

В скрипте приложений работает каждая строка, за исключением:

 ctx.drawImage(img, 0, 0, 400, 226);
  

drawImage Не разрешено или еще не реализовано в службе HTML-скриптов Apps? Когда изображение рисуется на холсте, размер изображения может быть уменьшен. Это то, чего я пытаюсь достичь. Если кто-нибудь знает, как я могу уменьшить размер изображения в скрипте приложений, я бы очень хотел знать. (НЕ уменьшайте размер отображения в HTML, уменьшите фактический размер байта)

Мне интересно, могу ли я отправить файл изображения в .gs code, преобразовать его в строку, отправить обратно, а затем поместить в холст или тег изображения?

В скрипте Apps теперь есть новый изолированный режим с именем IFRAME:

 function doGet() {
  var template = HtmlService.createTemplateFromFile('Index');

  // Build and return HTML in IFRAME sandbox mode.
  return template.evaluate()
      .setTitle('Compress Image')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
};
  

Теперь он позволяет ctx.drawImage()

 <form>
  <input type="file" accept="image/*" onchange="fncChangeSize(this.files[0], newWidth, newHeight)" >
</form>

<canvas id="cnvsForFormat" width="400" height="266" style="border:1px solid #c3c3c3"></canvas>

<script>
  window.fncChangeSize = function(imageData, newWidth, newHeight) {
    console.log("fncChangeSize ran: "   frmData);

    var cnvs=document.getElementById("cnvsForFormat");

    var img = new Image;
    img.src = URL.createObjectURL(imageData);
    var ctx=cnvs.getContext("2d");
    ctx.drawImage(img,0,0, newWidth, newHeight);
  };
</script>
  

Документация Mozilla — drawImage