HTML5会在上传前调整图片大小,并通过帖子请求发送

时间:2016-08-10 20:21:36

标签: javascript php jquery html5

我按照this问题在上传之前调整图片大小并且有效。但我需要发布这个图像,就像我提交表单时一样..我已经尝试了很多东西来做这个但是没办法......我不想用ajax发送它。它应该附加到post请求中。我找到的文件/答案说'发布ajax'..

你知道吗?谢谢你的帮助!

编辑:这是代码。 (几乎与上面的链接相同)

    function handleFiles()
    {
        var filesToUpload = $(this)[0].files;
        var file = this_input.get(0).files[0];
        var name = file.name;

        // Create an image
        var img = document.createElement("img");
        // Create a file reader
        var reader = new FileReader();
        // Set the image once loaded into file reader
        var ctx;
        var dataurl;
        reader.onload = function(e)
        {
            img.src = e.target.result;
            alert(e.target.result);
            var canvas = document.createElement("canvas");
            //var canvas = $("<canvas>", {"id":"testing"})[0];
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 1920;
            var MAX_HEIGHT = 1080;
            var width = img.width;
            var height = img.height;

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }
            canvas.width = width;
            canvas.height = height;
            ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

            dataurl = canvas.toDataURL("image/jpeg");
            //$('#img_hidden').attr('value', dataurl);
            document.getElementById('image').src = dataurl;

        }
        // Load files into file reader
        reader.readAsDataURL(file);

    }

0 个答案:

没有答案