#javascript #html #css #resize
#javascript #HTML #css #изменение размера
Вопрос:
По сути, я пытаюсь изменить размер изображения и загрузить его с новой шириной и высотой, но он загружает только исходную версию:
jQuery(document).ready(function() {
jQuery(function () {
jQuery(":file").change(function () {
if (this.files amp;amp; this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
orginalWidth = $("#image").width();
orginalheight = $("#image").height();
// alert(orginalheight);
var images = jQuery('.thumb-wrapper img'); //caches the query when dom is ready
// var CELL_WIDTH = 150;
var ASPECT = 1.5;
jQuery( "#slider" ).slider({
step: 5,
min: 70,
max: 200,
value: 100,
slide: function(event, ui) {
var size = (orginalWidth * ui.value /10) "px";
// alert(size);
images.stop(true).animate({width: size, height: size / ASPECT}, 250);
}
});
}
});
});
function imageIsLoaded(e) {
jQuery("#download").removeAttr("style");
jQuery("#file").css("display", "none");
jQuery('#image').attr('src', e.target.result);
jQuery('#download').attr('href', e.target.result);
};
});
HTML :
<div id="slider"></div>
<div class="file-list">
<div class="file-cell">
<div class="thumb-wrapper">
<input id="file" type='file' style=""/>
<img id="image" src="#" alt="your image" />
<a id="download" href="#" download="filename.jpg" style="display:none;">Download</a>
</div>
</div>
</div>
И вот демонстрация Jsfiddle
Любое решение для этого? Очень признателен!
Комментарии:
1. Я сделал это для загрузки, но не для загрузки. Я могу ошибаться, но первое, что я бы сделал для достижения этой цели, — это выполнить повторную выборку файла на сервере, а затем ajax получит повторную выборку.
Ответ №1:
То, что вы делаете прямо сейчас, заставляет браузер изменять размер изображения в окне просмотра, не изменяя исходное изображение. Что вам нужно сделать, так это создать скрипт для изменения размера изображения на стороне сервера. Вы используете jQuery для отправки изображения на сервер и получения измененного изображения обратно.
Комментарии:
1. Это правильно, просто подумал, что я бы добавил название библиотеки для PHP (GD) и ссылку на ее документы. Я полностью согласен с вашим ответом 1 php.net//manual/en/book.image.php
2. Он не упомянул, какой язык программирования он мог бы использовать, поэтому я оставил этот вопрос открытым. Если он действительно использует PHP, хорошей альтернативой GD может быть ImageMagick.
3. Это правда, и это довольно хорошее предположение, учитывая, что большинство веб-сайтов работают на PHP. Я только читал об ImageMagick и слышал хорошие вещи.
4. Существует ли скрипт, который может изменять размер изображения в зависимости от ширины атрибута img?
5. Я думаю, вам нужно будет самостоятельно создать серверный скрипт. Я не уверен, есть ли готовые сценарии для этой задачи, поскольку она довольно маленькая. Вы можете использовать jQuery для отправки изображения на сервер вместе с требуемой шириной, а затем с помощью Imagick вы можете изменить его размер. Небольшой пример (на PHP):
$image = new Imagick('example_in.png'); $image->thumbnailImage(300, 0); $image->writeImage('example_out.png');. Это придало бы изображению ширину 300 пикселей.