Ответ 1
Да, это можно сделать.
Он основан на новом атрибуте html5 "загрузка" якорных тегов.
Поток должен быть примерно таким:
- загрузить изображение
- нарисуйте изображение в холсте с указанными границами урожая.
- получить данные изображения с холста и сделать его атрибутом
hrefдля тега привязки в dom - добавить атрибут загрузки (
download="desired-file-name") к этому элементуaЭто. все, что вам нужно сделать, это нажать "ссылку для загрузки", и изображение будет загружено на его компьютер.
Я вернусь с демоверсией, когда я получу шанс.
Обновление
Здесь живая демонстрация, как я и обещал. Он принимает логотип jsfiddle и посещает 5px каждого поля.
Код выглядит следующим образом:
var img = new Image();
img.onload = function(){
var cropMarginWidth = 5,
canvas = $('<canvas/>')
.attr({
width: img.width - 2 * cropMarginWidth,
height: img.height - 2 * cropMarginWidth
})
.hide()
.appendTo('body'),
ctx = canvas.get(0).getContext('2d'),
a = $('<a download="cropped-image" title="click to download the image" />'),
cropCoords = {
topLeft : {
x : cropMarginWidth,
y : cropMarginWidth
},
bottomRight :{
x : img.width - cropMarginWidth,
y : img.height - cropMarginWidth
}
};
ctx.drawImage(img, cropCoords.topLeft.x, cropCoords.topLeft.y, cropCoords.bottomRight.x, cropCoords.bottomRight.y, 0, 0, img.width, img.height);
var base64ImageData = canvas.get(0).toDataURL();
a
.attr('href', base64ImageData)
.text('cropped image')
.appendTo('body');
a
.clone()
.attr('href', img.src)
.text('original image')
.attr('download','original-image')
.appendTo('body');
canvas.remove();
}
img.src = 'some-image-src';
Обновление II
Забыл упомянуть: конечно, есть недостаток:(.
Из-за той же политики происхождения, которая применяется к изображениям, также, если вы хотите получить доступ к данным изображения (с помощью метода холста toDataUrl).
Таким образом, вам все равно нужен серверный прокси-сервер, который будет служить вашему изображению, как если бы он размещался в вашем домене.
Обновление III Хотя я не могу предоставить демо-версию для этого (по соображениям безопасности), вот пример кода PHP, который решает политику одного и того же происхождения:
file proxy.php:
$imgData = getimagesize($_GET['img']);
header("Content-type: " . $imgData['mime']);
echo file_get_contents($_GET['img']);
Таким образом, вместо загрузки внешнего изображения непосредственно из него:
img.src = 'http://some-domain.com/imagefile.png';
Вы можете загрузить его через свой прокси:
img.src = 'proxy.php?img=' + encodeURIComponent('http://some-domain.com/imagefile.png');
И вот пример php-кода для сохранения данных изображения (base64) в фактическое изображение:
file save-image.php:
$data = preg_replace('/data:image\/(png|jpg|jpeg|gif|bmp);base64/','',$_POST['data']);
$data = base64_decode($data);
$img = imagecreatefromstring($data);
$path = 'path-to-saved-images/';
// generate random name
$name = substr(md5(time()),10);
$ext = 'png';
$imageName = $path.$name.'.'.$ext;
// write the image to disk
imagepng($img, $imageName);
imagedestroy($img);
// return the image path
echo $imageName;
Все, что вам нужно сделать, это отправить данные изображения в этот файл, и он сохранит изображение на диск и вернет вам существующее имя файла изображения.
Конечно, все это может показаться немного сложным, но я хотел показать вам, что то, что вы пытаетесь достичь, возможно.