Question

我正在使用Codeigniter 3.0构建一个应用程序，我有一个表单，用户可以使用dropzone 3.0同时上传多个图像。并且它工作得很好，直到我必须根据EXIF信息调整大小和旋转图像。这让我不得不使用Javascript加载图像库，但即使我在选项上添加contain参数后也不会保持宽高比。我读了Javascript Load Image docs但是我无法理解我应该如何处理loadImage.scale函数返回的File对象。

任何人都可以帮我这个吗？或者以更简单的方式旋转和调整图像大小，同时保持客户端的比例？

对于初学者来说，使用dropzone和Javascript加载图像库的文档（示例/教程）数量惊人地有限......或者我可能只是太愚蠢而无法理解某些内容？

到目前为止，这是我的代码：

gallery.php

<form enctype="multipart/form-data" method="POST">
    <div 
        name="upload_gallery"
        id="upload_gallery"
        class="dropzone"
    ></div>
    <input type="hidden" name="filename" id="filename"/>
    <div id="preview_gallery"></div>
</form>

javascript部分

var MAX_WIDTH = 800;
var MAX_HEIGHT = 800;

$("#upload_gallery").dropzone({
    url: '/review/upload_to_server',
    paramName: "upload_gallery",
    previewContainer: "#preview_gallery",
    autoQueue: false,
    init: function() {
        var myDropzone = this;
        myDropzone.on('addedfile', function(origFile) {
            var options = {
                maxWidth: MAX_WIDTH,
                maxHeight: MAX_HEIGHT,
                orientation: 0,
                contain:true
            }
            loadImage.parseMetaData(
                origFile, 
                function(data) {
                    if (data.exif) {
                        options.orientation = data.exif.get('Orientation');
                    }
                },
                options
            );
            loadImage(
                origFile, 
                function(img) {
                    var canvas = document.createElement('canvas');
                    canvas.width = options.maxWidth;
                    canvas.height = options.maxHeight;

                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, options.maxWidth, options.maxHeight);

                    var resizedFile = base64ToFile(canvas.toDataURL("image/jpeg"), origFile);

                    var origFileIndex = myDropzone.files.indexOf(origFile);
                    myDropzone.files[origFileIndex] = resizedFile;

                    myDropzone.enqueueFile(resizedFile);
                },
                options
            );
        });

        myDropzone.on('success', function(file, response, action) {
            response = JSON.parse(response);
            $("#filename").val(response.new_filename);
        });
    }
});

PHP文件

public function upload_to_server()
{
    $result = array(
        'new_filename' => '',
        'message' => '',
    );
    $upload_dir = './assets/img/';
    if ( ! file_exists($upload_dir))
    {
        mkdir($upload_dir, 0777, true);
    }

    mt_srand();
    $ext = strtolower(pathinfo(basename($_FILES['upload_gallery']['name']), PATHINFO_EXTENSION));
    $encrypted_filename = md5(uniqid(mt_rand())).'.'.$ext;

    $config['upload_path']      = $upload_dir;
    $config['file_name']        = $encrypted_filename;
    $config['allowed_types']    = 'gif|png|jpg';
    $config['file_ext_tolower'] = TRUE;
    $config['max_size']         = 2048;
    $config['detect_mime']      = TRUE;

    $this->load->library('upload');
    $this->upload->initialize($config);
    if ($this->upload->do_upload('upload_gallery'))
    {
        $result['new_filename'] = $encrypted_filename;
    }
    else
    {
        $result['message'] = $this->upload->display_errors();
    }

    echo json_encode($result);
}

修改

在午夜发现解决方案..认真。事实证明，我只需要通过更改此部分来计算画布的尺寸：

                    var canvas = document.createElement('canvas');
                    canvas.width = options.maxWidth;
                    canvas.height = options.maxHeight;

                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, options.maxWidth, options.maxHeight);

进入这个

                        var width = img.width;
                        var height = img.height;

                        // hitung dimensi resize
                        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;
                            }
                        }

                        // convert menjadi File Object
                        var canvas = document.createElement('canvas');
                        canvas.width = width;
                        canvas.height = height;

                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0, width, height);

希望这能帮助一个游荡的灵魂在某个地方。

使用dropzone和javascript加载图像按比例调整图像大小

0 个答案: