1

I've been looking all of the web and trying out example codes, demos, and even trying to get pieces and snippets of code recommended in forums here and on other websites but I'm at a loss with what I need to do.

I'm trying to build a working upload script/form into my images script. I'm needing it to resizes a uploaded image to the minimum size I allow, for example anything above 1200px wide or tall will be set to 1200px at whichever dimension is longer, width or height.

From there I believe I can add in creating a thumbnail, but I really need to understand how it works. I've just not had good luck.

Can anyone point me in the right direction? I've read some of the "similar questions" posted here on stack overflow but nothing has helped. Maybe I'm not searching the right terms?

Also here is the most recent code I've been working with, I found the code and changed it a little so far but not sure it's even what I need?

http://jsfiddle.net/LvsYc/9899/

<form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });
logicK
  • 207
  • 2
  • 11
  • Here is a good tutorial for what you want to do https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ . Unfortunately, native resizing greatly degrades the image. You can take a look at http://stackoverflow.com/a/3223466/934420 for resizing and http://stackoverflow.com/a/3514404/934420 for outputing the canvas element to an image if you want to develop a method yourself. – wackozacko Dec 22 '16 at 21:24
  • Thanks @wackozacko I'll look at those right now. – logicK Dec 22 '16 at 21:51

0 Answers0