Как сохранить изображение в папку, через js?
Вложений: 2
Делаю сохранение изображение путем создания Blob и декодирования данных и последующего сохранения в папку. Файл сохраняется по разному в зависимости от версии браузера, в некоторых случаях требуется подтверждения всплывающего окна:
Вложение 4731 В других происходит по умолчанию в папку с картинками и появляется уведомление, что image сохранилось (пример на картинке). Вложение 4732 Как сделать сохранения в корень сайта, в указанную папку без всплывающих окон и появления внизу уведомлений? Сделать с помощью этого.
var a = document.createElement("a");
a.href = url;
a.download = filename.val();
document.body.appendChild(a);
Полностью код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="./jquery-1.9.1.js"></script>
<title>Save Files</title>
<style>
body {
font-family: sans-serif;
}
#file-area {
border: 2px dashed #ccc;
border-radius: 20px;
width: 480px;
margin: 50px auto;
padding: 20px;
}
</style>
</head>
<body>
<div id="file-area">
<form id="form_upload" class="my-form">
<p>
Имя файла:
<input type="text" id="filename" value="filename"/></p>
<p><input type="file" name="file" id="file1" size="1"/></p>
</form>
</div>
</form>
<script>
//https://stackovergo.com/ru/q/3737131/create-and-save-a-file-with-javascript-duplicate
// https://ask-dev.ru/info/13916/create-a-file-in-memory-for-user-to-download-not-through-server
$('input[type=file]').on('change', function(event) {
addFiles(this.files);
});
function addFiles(files)
{
var file1 = document.getElementById("file1");
var filename = $("#filename");
file = file1.files[0];
var fr=new FileReader;
fr.addEventListener("load",function()
{
var url=fr.result;
//Декодирование данных
for(var decodedData=atob(fr.result.split(",")[1]),dt=[],ec1=0;ec1<decodedData.length;ec1++)
{
dt.push(decodedData.charCodeAt(ec1));
}
url=window.URL.createObjectURL(new Blob([new Uint8Array(dt)],{type:"image/jpeg"}))
document.write('<img src="'+url+'">');
var a = document.createElement("a");
a.href = url;
a.download = filename.val();
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
},false)
fr.readAsDataURL(file)
}
</script>
</body>
</html>
|
Никак.
|
Цитата:
|
Мне нужно сохранить картинку с другого сайта, к себе на компьютер (localhost, тестовый сайт). Получилось сделать вот так и это работает.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<script src="jquery-2.1.1.min.js"></script>
<script>
window.onload = function()
{
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function loadImage(src){
return new Promise(function(resolve){
var pic = new Image();
pic.onload = function(){
canvas.width = pic.width;
canvas.height = pic.height;
resolve(pic);
}
pic.crossOrigin = 'anonymous';
pic.src = src;
});
}
function drawImage(pic){
context.drawImage(pic, 0, 0, pic.width, pic.height);
context.fillStyle = "black";
context.font = 'bold 30px sans-serif';
context.fillText("Autor", 290, 235);
var dataURL = canvas.toDataURL("image/png");
return dataURL;
}
function saveImage(dataURL) {
for(var decodedData=atob(dataURL.split(",")[1]),dt=[],ec1=0;ec1<decodedData.length;ec1++)
{
dt.push(decodedData.charCodeAt(ec1));
}
url=window.URL.createObjectURL(new Blob([new Uint8Array(dt)],{type:"image/jpeg"}))
document.getElementById("text1").innerHTML = url;
$.ajax({
type: "POST",
url: "upload.php",
data: {image: dataURL}
}).done(function(o) {
console.log('saved');
console.log(o);
});
};
loadImage('http://i.imgur.com/fHyEMsl.jpg').then(drawImage).then(saveImage);
}
</script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<textarea id="text1" cols="45" rows="15"></textarea>
<button id="submitGraphic">Click</button>
</body>
</html>
PHP-код upload.php: Цитата:
Цитата:
|
Передавай на сервер путь к картинке.
Пусть сервер сам скачивает картинку |
Есть два способа выгрузить картинки с другого сайта с помощью php?
1 Способ: Цитата:
Цитата:
Цитата:
Что касается почему не всегда работает второй вариант, через CURL, то предположительно по той же самой причине что и JS (хотя и нет ошибок), значит остается первый вариант, который работает всегда. Но один php не годится использовать, надеялась сделать загрузку через progress bar. Цитата:
|
| Часовой пояс GMT +3, время: 16:03. |