#html #css #image #image-resizing
#HTML #css #изображение #изменение размера изображения
Вопрос:
Проблема: при разработке веб-сайта я иногда использовал width: xxx; на изображениях. Таким образом, я смог настроить изображения. Однако это приводит к увеличению размера.
Решение: автоматическая выборка всех изображений, имеющих свойство width: propery . Измените их на это: свойство width с сохранением размеров. Сохраните файл в формате .gif на компьютере.
Кто-нибудь знает хорошее решение?
Комментарии:
1. для этого потребуется лучший язык программирования, чем javascript.
2. @DanBizdadea JavaScript также может манипулировать изображениями, используя Canvas или SVG.
Ответ №1:
Вы можете сделать это с помощью GD (если у вас включен GD или GD2 в вашей установке php) http://php.net/image
<?php
function resizeImage($image,$width=null,$height=null){
if(!$width and !$height) return false;
$info = getimagesize($image);
if(!$height) $height = $width/$info[0]*$info[1];
if(!$width) $width = $height/$info[1]*$info[0];
$new = newEmptyImage($width, $height);
$resource = imagecreatefromgif($image);
imagecopyresampled($new,$resource,0,0,0,0,$width,$height,$info[0],$info[1]);
return imagegif($new,$image);
}
function newEmptyImage($width,$height){
$new = imagecreatetruecolor($width,$height);
imagealphablending($new, false);
imagesavealpha($new, true);
$bg = imagecolorallocatealpha($new,0,0,0,127);
imagefill($new,0,0,$bg);
return $new;
}
?>
теперь вы можете просто вызвать resizeImage("example.gif",120);
Ответ №2:
Я написал фрагмент кода JavaScript для замены всех изображений в документе версией с измененным размером, используя <canvas>
. Скрипка: http://jsfiddle.net/F2LK2 /
function imageToFit(img) {
var width = img.width;
var height = img.height;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
context.drawImage(img, 0, 0, width, height);
img.parentNode.replaceChild(canvas, img);
}
window.onload = function(){
var image = document.getElementsByTagName("img");
for(var i=image.length-1; i>=0; i--){
//Backwards, because we replace <img> by <canvas>
imageToFit(image[i]);
}
}
Если вы заинтересованы в написании сценариев для элемента Canvas, взгляните на руководство Mozilla по Canvas.
Комментарии:
1. Я предполагаю, что часть проблемы заключается в том, что любая клиентская сторона все равно должна будет получить полное большое изображение, и что требуется одноразовый процесс для извлечения, изменения размера и сохранения измененного изображения, чтобы в будущем можно было запросить меньшее изображение. Возможно, я пропустил суть вопроса. 🙂
2. @Chris OP явно добавил
JavaScript
тег к вопросу. Я интерпретировал вопрос следующим образом: «Когда пользователь сохраняет мое изображение, я хочу, чтобы изображение имело точный размер, отображаемый».3. Верно. Я смотрел на «Однако это создает накладные расходы по размеру». Я интерпретировал это как беспокойство о накладных расходах при передаче. Хотя вы вполне можете быть правы. Я оставлю это на усмотрение OP, чтобы беспокоиться об этом сейчас. 🙂
4. помните, что использование JavaScript не означает, что он работает на стороне клиента Node.js