Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.06.2022, 23:04
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 49

Как сохранить изображение в папку, через js?
Делаю сохранение изображение путем создания Blob и декодирования данных и последующего сохранения в папку. Файл сохраняется по разному в зависимости от версии браузера, в некоторых случаях требуется подтверждения всплывающего окна:
Screenshot1.jpg
В других происходит по умолчанию в папку с картинками и появляется уведомление, что image сохранилось (пример на картинке).
Screenshot2.jpg
Как сделать сохранения в корень сайта, в указанную папку без всплывающих окон и появления внизу уведомлений? Сделать с помощью этого.
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>
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2022, 03:06
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

Никак.
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2022, 04:40
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от Olga27
Как сделать сохранения в корень сайта
Напрямую с диска открытый через браузер html-файл не является сайтом (в адресной строке протокол file:). О сайте говорят когда html-файл открывается через веб-сервер (в адресной строке протокол http: или https:). Поэтому, если речь идёт о сайте и сохранении в корень сайта, то как вы хотите это реально, чтобы это работало вам нужно запустить локальный веб-сервер, отправить картинку через ajax и сохранить серверным языком. Но то что вы делаете, судя по скриншотам, просто что-то сохраняете из браузера себе на диск, отношения к сайту не имеет и такие всплывающие уведомления определяются в настройках браузера каждым пользователем самостоятельно на основе его индивидуальных предпочтений.

Последний раз редактировалось Rise, 19.06.2022 в 07:09.
Ответить с цитированием
  #4 (permalink)  
Старый 19.06.2022, 05:28
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 49

Мне нужно сохранить картинку с другого сайта, к себе на компьютер (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
if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {


$data = $_POST['image'];


$uri = substr($data,strpos($data,",")+1);


$file = time().'.png';


file_put_contents($file, base64_decode($uri));


echo $file;

}
?>
Только на некоторых сайтах скрипт сохраняет картинки, на других выдает ошибку и как обойти её, я не знаю. Может кто подскажет?
Цитата:
Access to Image at 'https://sunflowercreations.org/wp-img/javascript/how-add-canvas-todataurl-in-src.png' from origin 'http://site.su' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://site' is therefore not allowed access.

Последний раз редактировалось Olga27, 19.06.2022 в 05:32.
Ответить с цитированием
  #5 (permalink)  
Старый 19.06.2022, 10:42
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Передавай на сервер путь к картинке.
Пусть сервер сам скачивает картинку
Ответить с цитированием
  #6 (permalink)  
Старый 19.06.2022, 12:43
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 49

Есть два способа выгрузить картинки с другого сайта с помощью php?
1 Способ:
Цитата:
<?php
$url = 'https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg';
$path = './images2/priroda_kartinki_foto_03.jpg';
file_put_contents($path, file_get_contents($url));
?>
2 Способ:
Цитата:
<?php

$ch = curl_init('https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg');
$fp = fopen('./images/ priroda_kartinki_foto_03.jpg’, 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);

?>
Второй вариант, как и в случае с JavaScript работает не всегда. Ошибок нет, но картинка сохраняется пустой. Если попытаться загрузить ://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg с помощью JavaScript мы опять получим тоже самое сообщение:
Цитата:
Access to Image at 'https://sunflowercreations.org/wp-img/javascript/how-add-canvas-todataurl-in-src.png' from origin 'http://site.su' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://site' is therefore not allowed access.
Если попытаться загрузить эту картинку http://img.yandex.net/i/www/logo.png, то она загрузиться в трех разных примерах.

Что касается почему не всегда работает второй вариант, через CURL, то предположительно по той же самой причине что и JS (хотя и нет ошибок), значит остается первый вариант, который работает всегда. Но один php не годится использовать, надеялась сделать загрузку через progress bar.
Цитата:
<progress id="progressX" max="100" value="0"></progress>
Можно как-то сделать загрузку из внешнего источника через progress bar?

Последний раз редактировалось Olga27, 19.06.2022 в 12:46.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как изменять left и top у hover через js что бы иметь возможность провести шар по кон feddim72 Элементы интерфейса 2 13.12.2020 23:02
как присвоить путь картинки через js SolomonRei Элементы интерфейса 1 24.04.2018 21:34
Как скачать файл через JS? Dimaz Events/DOM/Window 9 20.07.2014 22:20
Как подключить данные с PHP по средствам JS на удаленный сервер. Nyam Элементы интерфейса 13 11.04.2014 17:14
как вставлять flash в html через js михаил123 Flash 1 17.11.2012 22:01