Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to resize images on client, not working
    primarykey
    data
    text
    <p>Ok, I'm at my whits end on this one. I am trying to resize uploaded images on the client with Javascript.</p> <p>I'm using,</p> <pre><code> &lt;script&gt; function uploadFiles() { if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) { if (!document.getElementById('confirm').checked) { alert('You must click "confirm".'); return false; } alert('begin'); var files = document.getElementById('file').files; for(var i = 0; i &lt; files.length; i++) { alert('start'); resizeAndUpload(files[i]); } return false; } else { alert('The File APIs are not fully supported in this browser.'); return false; } } function resizeAndUpload(file) { var reader = new FileReader(); reader.onloadend = function() { var tempImg = new Image(); tempImg.src = reader.result; tempImg.onload = function() { var MAX_WIDTH = 300; var MAX_HEIGHT = 300; var tempW = tempImg.width; var tempH = tempImg.height; if (tempW &gt; tempH) { if (tempW &gt; MAX_WIDTH) { tempH *= MAX_WIDTH / tempW; tempW = MAX_WIDTH; } } else { if (tempH &gt; MAX_HEIGHT) { tempW *= MAX_HEIGHT / tempH; tempH = MAX_HEIGHT; } } var canvas = document.createElement('canvas'); canvas.width = tempW; canvas.height = tempH; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0, tempW, tempH); var fd = new FormData(); fd.append("upload-avatar", "Upload"); var confirm = 'off'; if (document.getElementById('confirm').checked) { confirm = 'on'; } fd.append("confirm", confirm); fd.append("file", canvas.mozGetAsFile("image.jpg")); fd.append("license", document.getElementById('license').value); fd.append("name", document.getElementById('name').value); var share = 'off'; if (document.getElementById('share').checked) { share = 'on'; } fd.append("share", share); var xhr = new XMLHttpRequest(); xhr.open("POST", "MyUploadServlet"); xhr.send(fd); alert('done'); } } reader.readAsDataURL(file); } &lt;/script&gt; </code></pre> <p>Then in my html I have,</p> <pre><code>&lt;form onsubmit="return uploadFiles()" method="post" enctype="multipart/form-data"&gt; &lt;input id="file" type="file" name="file" multiple/&gt;&lt;br/&gt; &lt;input id="confirm" type="checkbox" name="confirm"&gt;confirm&lt;/input&gt;&lt;br/&gt; ... &lt;input name="upload-resize" value="Upload and resize" type="submit"/&gt;&lt;br/&gt; &lt;/form&gt; </code></pre> <p>This actually works, sort of, but the page does not reload, which I want it to do to show the uploaded images. If I return true from the function which I think will cause a reload then it does not work, it never seems to call the post and hangs. I also tried location.reload() but similar issue.</p> <p>Ok I guess I have a few questions on this code:</p> <p>1 - How to reload the page?</p> <p>-> The answer seems to be call "history.go(0);", this seemed to work,</p> <p>2 - This only works on Firefox, not Chrome, IE, or Safari I assume because of the usage of "canvas.mozGetAsFile("image.jpg")", any idea how to get it to work on Chrome?</p> <p>-> using toBlob seems to work, but seems to break with the page reload, works on Firefox but not others (without polyfill which I have not tried yet)</p> <p>3 - Ideally I would have two buttons, one that does the resize, and one that does the normal form submit, no idea how to do that either. Currently I have two complete copies of the form, one for resize, and one for normal file submit.</p> <p>4 - The images are uploaded as png format, how to compress as jpeg, or compress in general, even with the resize, some images show up bigger than the were as they loose their compression.</p> <p>-> using toBlob seems to give you jpg, but seems to break with the page reload, works on Firefox but not others (without polyfill which I have not tried yet)</p> <p>Sorry for the multi-part question, but I think anyone wanting to do this will need all of the answers.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload