Показать сообщение отдельно
  #4 (permalink)  
Старый 19.06.2022, 06: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 в 06:32.
Ответить с цитированием