【2021】Как изменить размер изображения из Интернета и отправить его в облачное хранилище для Firebase

【2021】Как изменить размер изображения из Интернета и отправить его в облачное хранилище для Firebase

Я реализовал процесс изменения размера изображения логотипа и отправки его в облачное хранилище для Firebase.
Я немного потрудился с преобразованием в base64, blob и т. д., поэтому я поделюсь им, чтобы новые разработчики могли понять процесс, который они хотят сделать как можно быстрее.

<!-- Optional image file button (This is implemented in my case because the file selection button is an image instead of the default button, but the normal file function is also acceptable. --> <label> <!-- Show part --> <span class="filelabel" title="Select a file"> <img src="images/camera.png"" width="32" height="26" alt="Image"> <!-- Selsect --> </span> <!-- Hide the original selection form. --> <input type="file" name="datafile" id="logo-img-input" onChange="imgPreView(event)"> </label>  <div id="preview"></div> <canvas id="for-resize-canvas" style="display: none;"></canvas> <button id="send" class="btn btn-primary">SEND</button>

index.html

<!-- Optional image file button (This is implemented in my case because the file selection button is an image instead of the default button, but the normal file function is also acceptable. -->
<label>
<!-- Show part -->
<span class="filelabel" title="Select a file">
<img src="images/camera.png"" width="32" height="26" alt="Image">
<!-- Selsect -->
</span>
<!-- Hide the original selection form. -->
<input type="file" name="datafile" id="logo-img-input" onChange="imgPreView(event)">
</label>
<div id="preview"></div>
<canvas id="for-resize-canvas" style="display: none;"></canvas>
<button id="send" class="btn btn-primary">SEND</button>