Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.01.2019, 07:36
Новичок на форуме
Отправить личное сообщение для seltrix Посмотреть профиль Найти все сообщения от seltrix
 
Регистрация: 31.01.2019
Сообщений: 3

конвертация image в base64
Добрый день.
Пытаюсь сконвертировать картинку по ссылке в base64, но результат получается таков: "data:,"
Что делаю не так?

код:

Код:
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="" />
</head>
<body>
	<img id="bannerImg" src="http://i.mycdn.me/i?r=AzGBqNaF5OQp2lMpnhRx4DEF6n4GIK-fj2ZRG4FZpDcQFF2nfVKdvp0RnpOmdvULI2k" />
	<p><a href="page2.html">Go to page 2</a></p>  

<script type="text/javascript">
	
	function getBase64Image(img) {  
		let canvas = document.createElement("canvas");  
		canvas.width = img.width;  
		canvas.height = img.height;  
	  
		let ctx = canvas.getContext("2d");  
		ctx.drawImage(img, 0, 0);  
	   
		let dataURL = canvas.toDataURL("image/png");  
		
		return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");  
	}  
  
	function getBase64ImageById(id){  
	   return getBase64Image(document.getElementById(id));  
	}  

console.log(getBase64ImageById("bannerImg"));
	
	</script>
</body> </html>
Ответить с цитированием
  #2 (permalink)  
Старый 31.01.2019, 07:45
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

canvas.width = img.width;
canvas.height = img.height;

Нужно загрузить, потом узнавать размеры. И картинка должна быть своей.
Ответить с цитированием
  #3 (permalink)  
Старый 31.01.2019, 08:32
Новичок на форуме
Отправить личное сообщение для seltrix Посмотреть профиль Найти все сообщения от seltrix
 
Регистрация: 31.01.2019
Сообщений: 3

Что значит своей? Находиться на моем сервере или загружаться с компьютера пользователя?
А можно сделать чтобы она по ссылке могла подгружаться в том числе и с чужого ресурса?
Ответить с цитированием
  #4 (permalink)  
Старый 31.01.2019, 08:36
Новичок на форуме
Отправить личное сообщение для seltrix Посмотреть профиль Найти все сообщения от seltrix
 
Регистрация: 31.01.2019
Сообщений: 3

И в чем разница своя она или нет? По факту это в любом случае ведь url и загрузка в элемент img? Будь она на моем сервере или чужом
Ответить с цитированием
  #5 (permalink)  
Старый 31.01.2019, 08:41
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

Почитай в интернете про политику одного источника. Или CORS

Последний раз редактировалось MallSerg, 31.01.2019 в 08:51.
Ответить с цитированием
  #6 (permalink)  
Старый 31.01.2019, 08:45
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

seltrix, атрибут картинке надо еще добавить такой crossorigin="anonymous" и в принципе должно работать данный сервер позволяет, здесь почитать можно.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическая смена картинок через заданное время herotic Элементы интерфейса 45 15.05.2020 16:44
Проблемы с билдом приложения Sogl ExtJS 11 27.09.2016 22:07
Преобразование Base64 в файл в IndexedDb pakskiy Общие вопросы Javascript 4 15.04.2015 13:26
Маштабировать изображение Alex351960 Элементы интерфейса 1 29.07.2013 23:55
Что нужно дописать в коде чтобы изображение менялось постоянно. vadim90k (X)HTML/CSS 22 09.07.2012 16:33