HTML / JS / Canvas - resize image before loading without base64
I am using the following to download and show a preview of the image before loading the image.
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function(oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
<img id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function(oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
};
</script>
How can I reliably edit the dimensions on the client side before uploading the image? Is there a way to avoid loading them as blobs? I don't want to store the image in the db, instead I want to save it as a file and store the path entry in the db.
source to share
You do have a few questions.
(1) How to resize an image on the client side.
You can use html5 canvas to resize image client side.
(2) How to transfer an image to the server.
Blob and Base64 string are standard formats used to transfer image information from client to server. These formats are used for transport, but the original image file format can be restored on the server. There is no reason I know to avoid using these standard formats for transfer purposes, even if you want the image to end up being saved by the server as an image file (.png, .jpg, etc.).
(3) How to store Blob / Base64 string on server as image file.
Both Blobs and Base64 strings can be converted by the server to an image file (.png, .jpg, etc.), and then can be saved to the server as a file.
The server can:
- Accept incoming blob / base64 data:
- Convert incoming Blob / Base64 data to image file format (.png, .jpg, etc.).
- Create a unique filename for the image file
- Save image file to storage
- And put the filename into the database.
All of these questions have been answered multiple times on Stackoverflow.
You will find a search on Stackoverflow will give you the answers you need.
source to share