Отображение одного холста другому

У меня проблема с отображением одного холста на другой. Я делаю все, что в соответствии с this solution Отображение одного холста другому

<script> 
    var source = document.getElementById('hiddenCanvas'); 
    var source_ctx = source.getContext('2d'); 
    var img = new Image(); 
    img.onload = function(){ 
     source.width = img.width; 
     source.height = img.height; 
     source_ctx.drawImage(img, 0, 0, img.width, img.height); 
     } 
    img.src = 'icon.jpg'; 
    var destination = document.getElementById('visibleCanvas'); 
    var destin_ctx = destination.getContext('2d'); 
    destin_ctx.drawImage(source, 0, 0); 
</script>

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

источник

2013-07-26 Maxim Ershov

<script> 
function init() 
{ 
    var source = document.getElementById('hiddenCanvas'); 
    var source_ctx = source.getContext('2d'); 

    var destination = document.getElementById('visibleCanvas'); 
    var destin_ctx = destination.getContext('2d'); 

    var img = new Image(); 
    img.onload = function(){ 
     source.width = img.width; 
     source.height = img.height; 
     source_ctx.drawImage(img, 0, 0, img.width, img.height); 

     destin_ctx.drawImage(source, 0, 0); 
    } 
    img.src = 'arun.jpg'; 
} 
</script> 
</head> 
<body onload="init();"> 
<canvas id="hiddenCanvas" /> 
<canvas id="visibleCanvas" />

Ваш код не работает, потому что вы пытаетесь получить доступ брезентовый элемент, прежде чем он будет загружен в Dóm

источник

2013-07-26 03:22:03

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

Переместить последнюю операцию рисования внутри обработчика onload. Кроме того, помните, чтобы установить размер для холста назначения:

var source = document.getElementById('hiddenCanvas'); 
var source_ctx = source.getContext('2d'); 

var destination = document.getElementById('visibleCanvas'); 
var destin_ctx = destination.getContext('2d'); 

var img = new Image(); 
img.onload = function(){ 
    source.width = img.width; 
    source.height = img.height; 
    source_ctx.drawImage(img, 0, 0, img.width, img.height); 

    destination.width = source.width; 
    destination.height = source.height; 
    destin_ctx.drawImage(source, 0, 0); 
} 
img.src = 'icon.jpg';

источник

2013-07-26 03:10:21 K3N

уже пробовали, что до сих пор нет результата –

@MaximErshov обнаружил еще одну возможную ошибку, пожалуйста, см обновление , Вам также необходимо установить размер холста назначения (по крайней мере, неясно, если это будет сделано). – K3N

так, как вы в настоящее время структурированную код, img.onload выполняется после строка destin_ctx.drawImage. Это означает, что поток программы в настоящее время выглядит следующим образом:

Изображение велено начать загрузку
назначения холст обращается с использованием (в настоящее время заполняйте) Источник холст
Изображение загрузится OnLoad Выполняет
изображения в , заставляя рисовать холст источника. Холст назначения НЕ обновляется, поскольку операция destin_ctx.drawImage является одноразовой копией.

Что вам нужно сделать, это переместить вызов destin_ctw.drawImage в место в потоке выполнения, где вы знаете, что исходный холст определенно содержит соответствующее содержимое. В этом простом случае работа с ним будет связана с загрузкой изображения.

Вот полный (но упрощенный) HTML-файл, который работает для меня в хром, с измененным URL изображения:

 

    <script> 
    function load() { 
     var source = document.getElementById('hiddenCanvas'); 
     var source_ctx = source.getContext('2d'); 
     var destination = document.getElementById('visibleCanvas'); 
     var destin_ctx = destination.getContext('2d'); 
     var img = new Image(); 
     img.onload = function(){ 
      source.width = img.width; 
      source.height = img.height; 
      source_ctx.drawImage(img, 0, 0, img.width, img.height); 
      destin_ctx.drawImage(source, 0, 0); 
     } 
     img.src = 'ship360_32.png'; 
    } 
    </script> 

    <body onload="load()"> 
    <canvas id="hiddenCanvas"></canvas> 
    <canvas id="visibleCanvas"></canvas> 
    </body>

источник

2013-07-26 03:26:36

Отображение одного холста другому

ответ

Смежные вопросы