javascript - 如何使用 HTML5 canvas 调整图片大小，然后将其上传到 Google 云端硬盘？

Question

我希望我的代码选择图像，调整其大小，然后将其上传到谷歌驱动器文件夹。我在选择和上传文件方面没有问题，因为它工作正常，但我无法在两者之间调整大小代码。

我有以下代码，可以使用 Google 脚本将图像上传到 Google 云端硬盘中的文件夹。

GS:

function uploadFiles(form) {
  
  try {
    
    var dropbox = "STpics";
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    var data = getData();
    var myName2 = form.sorp3;
    
  
   
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    var blob = form.myFile;    
    var file = folder.createFile(blob); 
    file.setName(Mohd +".jpg");
    file.setDescription("Uploaded by " + xxxxx);
    
    
  } catch (error) {
    
    return error.toString();
  }
  
}

HTML:

<form id="myForm">

    <input type="file" name="myFile" accept=".jpg,.jpeg,.png,.gif" />  <br><br>
    <input type="submit" value="upload" 
           onclick="this.value='uploading..'; 
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
</form>

<div id="output"></div>


<script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
        
    }
</script>


<div id="Message12"></div>
<div id="Message"></div>

 <script>
 
 
 
    function DataSaved(){    
    document.getElementById('Message').innerHTML = "sending...";
   <?var url = getScriptUrl();?> 
   window.open(
  '<?=url?>?page=2 ',
  '_top' // <- This is what makes it open in a new window.
);
   
};
 </script>
 
 
 
 

我有很多 HTML5 Canvas 脚本来调整图像大小，但我无法将其与上面的工作代码集成! 感谢任何帮助。

Answer 1

1. 首次使用link用于调整大小和裁剪图像
2. 提交hidden input到服务器然后base 64转换为图像，请see link

Hidden Input Auto generate after cropped or resized