Как использовать jCrop для временного изображения?

У меня есть форма, в которой вы можете выбрать изображение с вашего жесткого диска, и когда вы выбрали изображение, оно сразу же отображается на той же странице.

Я хочу использовать это изображение, как в демонстрационной миниатюре: http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail Я также хочу, чтобы изображение jCrop менялось при изменении входного файла.

Это мой PHP-файл:

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script class="jsbin"   src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
    function readURL(input) {
    if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .width(this.width)
                    .height(this.heigt);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    </script>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>          
    <input type="file" name="image" id="image" onchange="readURL(this)" /><br />
    <label for="image">Image:</label>
    <img id="blah" src="#" alt="your image" />      
    </body>
    </html>

Это работает так, как я хочу, но я не могу понять, как использовать это изображение с jCrop, есть идеи?


javascript jquery jcrop
person OriginalUtter    schedule 26.01.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам придется сохранить изображение во временной папке, потому что JCrop работает, извлекая исходное изображение и клонируя его в пользовательский контейнер, где и происходит волшебство.

Таким образом, вы сохраняете POST-изображение в папке tmp с php, вы выводите его в <img> в <div id = 'cropbox'> (для каждого примера), затем $('#cropbox').Jcrop().

person mddw    schedule 26.01.2013