Возможно ли работать с выбранными клиентом изображениями на клиентском ПК без загрузки изображения на сервер.Обрезать и изменить размер изображения на клиентов
Если да, то какой язык веб-программирования может это сделать?
Это может быть сделано только с Flash, Silverlight или обычным Plugin/ActiveX в зависимости от целевого браузера.
Это также можно сделать с помощью яваскрипта библиотек, как JQuery, MooTools, Prototype и script.aculo.us:
http://www.bitrepository.com/image-cropping-with-jquery-mootools-prototype-scriptaculous.html
Насколько я знаю, в то время как обрезка организована через пользовательский интерфейс на стороне клиента, изображение должно быть сначала загружено на сервер. JS просто отправляет координаты на сервер, а серверные культуры и шкалы. Таким образом, это не соответствует требованиям вопроса, поскольку изображение должно быть загружено первым. – Cole
На самом деле, если вы используете HTML5, вы можете напрямую манипулировать необработанными пиксельными данными в браузере. См. Например: https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas –
@Cole Вы можете получить доступ к локальным файлам с помощью javascript. Например: чтение файла с использованием HTML5, http://www.html5rocks.com/tutorials/file/dndfiles/#toc-reading-files или запуск вашего javascript локально, например, tiddlywiki делает http://www.tiddlywiki.com/ –
Вы можете использовать HTML5 Canvas, нет необходимости использовать плагин или такие.
Загрузите изображение, измените размер холста и нарисуйте изображение. Также можно извлечь результат как dataUrl.
<!DOCTYPE HTML>
<html>
<head>
<style>
body { margin: 0px; padding: 0px; }
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
// draw cropped image
var sourceX = 150;
var sourceY = 0;
var sourceWidth = 150;
var sourceHeight = 150;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width/2 - destWidth/2;
var destY = canvas.height/2 - destHeight/2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>
Все Заслуга:
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
Если вы ищете кадрирование изображения с помощью JavaScript, посмотрите на: https://github.com/supnate/icropper. Он обеспечивает пользовательский интерфейс для обрезки, но не позволяет обрезать изображение.
Вспышка позволяет редактировать изображение непосредственно на пользовательской машине? Если это правда, то большое спасибо. Я посмотрю. :) – Somebody
Это можно сделать в JavaScript –