调整图像大小并将其设置为输入文件 [英] Resizing image and set it to the inputfile

问题描述

我使用jquery在上传时调整图片大小，这很好用。但我的问题是我想发送调整大小的图像，我想在我的输入文件中设置新图像的数据，以便在提交时将其发送到服务器。但我无法实现这一点。每次发送大文件。这是我的代码：

Im using jquery to resize an image on upload, this work fine. But my problem is that i want to send the resized image,and i want to set the data of the new image in my input file such that on submit this is sent to the server. But im not able to acheive this. each time it is sending the large file. here is my code :

    <div>
                    <input name="photo" type="file"/>                     
                    <p><span></span></p>
                    <i></i>
                </div>
                <script>

                    $().ready(function() {


                        $("input[name*='photo']").change(function(e) {
                            var file = e.target.files[0];

                            // RESET
                            $('#area p span').css('width', 0 + "%").html('');
                            $('#area img, #area canvas').remove();


                           // CANVAS RESIZING
                            $.canvasResize(file, {
                                width: 300,
                                height: 0,
                                crop: false,
                                quality: 80,
                                //rotate: 90,
                                callback: function(data, width, height) {

                                    // SHOW AS AN IMAGE


                                    $('<img>').load(function() {

                                        $(this).css({
                                            'margin': '10px auto',
                                            'width': width,
                                            'height': height
                                        }).appendTo('#area div');

                                    }).attr('src', data);

                                    // here i am trying to assign the resized data to my image from my input file


                                    $(this).files[0] = data;

                                }
                            });

                        });
                    });
                </script>

                <script src="jqLibrary/jquery.exif.js"></script>
                <script src="jqLibrary/jquery.canvasResize.js"></script>
                <script src="jqLibrary/canvasResize.js"></script>
            </div>

推荐答案

事实上，我使用filereader让它工作，然后将数据传递给画布，然后通过javascritp remoting提交，因为我使用的是force.com platform.Here是代码的一部分：

In fact i get it to work using filereader and then pass the data to canvas and then submitting via javascritp remoting, as i was using the force.com platform.Here is part of the code :

function uploadFile() {
  var file = document.getElementById('attachmentFile').files[0];
  if(file != undefined) {
  if(file.size <= maxFileSize) {
    attachmentName = file.name;
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
    var tempImg = new Image();
    var dataURL;
    tempImg.src = this.result;
    tempImg.onload = function() {
        var MAX_WIDTH = 400;
        var MAX_HEIGHT = 300;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
                 tempH *= MAX_WIDTH / tempW;
                tempW = MAX_WIDTH;
            }
        } else {
        if (tempH > MAX_HEIGHT) {
            tempW *= MAX_HEIGHT / tempH;
            tempH = MAX_HEIGHT;
        }
    }
    var canvas = document.getElementById('myCanvas');
    canvas.width = tempW;
    canvas.height = tempH;
    var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0, tempW, tempH); 
    attachment = canvas.toDataURL("image/jpeg");                
    attachment = attachment.slice(23);
    positionIndex=0;
    fileSize = attachment.length;
             //this is a function to post the data
    uploadAttachment(null);
         }              
 } 
     fileReader.readAsDataURL(file); 

重要的部分是读取的文件类型（readAsDataURL）

the important part was the type of file read (readAsDataURL)

这篇关于调整图像大小并将其设置为输入文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！