Запись данных холста в строку и отображение в браузере - PullRequest
0 голосов
/ 20 марта 2012

У меня есть код ниже.Я пытаюсь 1. импортировать изображение с внешнего сайта 2. преобразовать изображение в холст 3. отобразить строку холста toDataURL () в браузере в div с ID = 'any'

Я получилшаги 1 и 2, но вы можете увидеть в выводе, если переключите комментарий на ссылку imgur от google на строке с img.src, что вывод для toDataURL одинаков, независимо от источника изображения.

Я хочу сделать это при записи в базу данных для просмотра длины строки и характеристик в браузере вместо того, чтобы переключаться на базу данных.

Спасибо, ajt

<canvas id="baseCanvas" width="275" height="95" style="solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
baseCanvas = document.getElementById('baseCanvas');
var img = new Image();

img.onload = function() {
baseCanvas.getContext('2d').drawImage(img,0,0);
baseCanvas.toDataURL('image/png'); 
}

img.src = 'http://www.google.com/images/srpr/logo3w.png';
// img.src = 'http://s.imgur.com/images/imgur.gif'

</script>

<div id="any"></div>
<script type="text/javascript">
document.getElementById('any').innerHTML = baseCanvas.toDataURL('image/png')
</script>

1 Ответ

1 голос
/ 20 марта 2012

Это классическая ошибка с canvas. Вы не можете сделать toDataURL с междоменным изображением. Если вы посмотрите на консоль ошибок, вы увидите «SECURITY_ERR: DOM Exception 18»

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...