Вопросы Теги

Ошибка безопасности с canvas.toDataURL () и drawImage () 

<!doctype html>
<canvas id="canvas" height="200" width="200"></canvas>
<div id="new"></div>
<script>
var div = document.getElementById("new");
var canvas = document.getElementById("canvas");  
var ctx = canvas.getContext("2d");  
var img = new Image();

img.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';
//img.src = 'local.png';

img.onload = function(){
    //draws the image on the canvas (works)
    ctx.drawImage(img,0,0,200,200);

    //creates an image from the canvas (works only for local.png)
    var sourceStr = canvas.toDataURL();

    //creates the img-tag and adds it to the div-container
    var newImage = document.createElement("img");
    newImage.src = sourceStr;
    div.appendChild(newImage);
}
</script>

Этот скрипт создает холст с логотипом html5. Из этого холста я хочу создать изображение, используя метод toDataURL (). Здесь я получаю ошибку безопасности.

Firefox сообщает - Ошибка: неперехваченное исключение: [Исключение ... Код «ошибки безопасности»: «1000» nsresult: «0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)»

Chrome сообщает - Неперехваченная ошибка: SECURITY_ERR: DOM Exception 18

Если я использую сценарий с изображением на сервере, он работает нормально. Поэтому он думает, что на этот раз это действительно особенность, а не ошибка. Кто-нибудь знает, как я могу создать изображение, используя холст, без изображения из другого сервера? Кстати: ошибка возникает, если вы запускаете сайт как локальный файл без веб-сервера.

5
задан cschol 18 February 2012 в 22:06
поделиться