куда можно загрузить png чтоб CORS не ругался?

271
26 ноября 2016, 17:47

Если картинка лежит на фейсбуке - я могу ее открыть в canvas, редактировать и скачать, а если картинка лежит на том же сервере где и находится мой сайт (000webhost.com) у меня отображается ошибка:

Access to Image at 'https://xxx.000webhostapp.com/ava1.png' from origin 'https://xxx.000webhostapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

function Up() { //загрузка логотипа 
  var ctx = document.getElementById('canvas').getContext('2d'), 
    img = new Image(); 
	img.crossOrigin = "anonymous"; 
  img.src = "https://graph.facebook.com/1387819034852828/picture?width=150&height=150";  
  img.onload = function() { 
    ctx.drawImage(img, 0, 0, 480, 400); 
  } 
}

function download() { //скачиване картинки 
  var dt = canvas.toDataURL('image/jpeg'); 
  this.href = dt; 
};

Answer 1

С facebook работает потому что он вместе с картинкой передает заголовок Access-Control-Allow-Origin:"*"

Соответственно чтобы работало со своего хоста надо настроить вебсервер на выдачу этих заголовков для картинок.

READ ALSO
Закругление прямоугольной картинки

Закругление прямоугольной картинки

Имеется картинка 400x200pxНеобходимо ее закруглить, ширина и высота должна быть равна 60px

2710
Как изменить клас через медиазапрос?

Как изменить клас через медиазапрос?

В бутстрапе есть встроенный класс для вертикального и горизонтального расположения группы кнопок, нужно сделать в мобильном виде кнопки...

2670
Как правильно поставить превдокласс

Как правильно поставить превдокласс

Селектор должен работать по логики вещей, этот селектор гласит: применять li относящегося ко всем UL кроме того что с классомq77

2747
Переход на flexbox

Переход на flexbox

Делаю теги для сайтаРаньше использовал display: inline-block

2853