Canvas convert to Image show empty Изображение

Я создал холст, где пользователь может вставить изображение из буфера обмена. Например, пользовательский экран снимал их экран и вставлял мой холст. После вставки пользователь может видеть изображение, вставленное в холст. Теперь я хочу преобразовать свой холст в изображение. Нет ошибки, но когда я нажимаю кнопку, я могу создать пустую картинку. Я вижу, что ящик, когда я выделяю html. Ниже приведен мой код и снимок экрана с пустым изображением.Canvas convert to Image show empty Изображение

Код.

<?xml version="1.0"?> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <script> 

    function convert() 
    { 
    var sampleImage = document.getElementById("myCanvasElt"); 
    //alert(sampleImage); 
    var can = convertCanvasToImage(sampleImage); 
// var apple = convertImageToCanvas(can); 
    document.getElementById("testguna").appendChild(can); 
    //document.getElementById("pngHolder").appendChild(apple); 
    } 

    // Converts image to canvas; returns new canvas element 
function convertImageToCanvas(image) { 
    var canvas = document.createElement("canvas").innerHTML; 

    canvas.width = image.width; 
    canvas.height = image.height; 
    canvas.getContext("2d").drawImage(image, 0, 0); 
    return canvas; 
} 

function convertCanvasToImage(canvas) { 
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png"); 
    return image; 
}  
    </script> 

<body> 
<h1>JavaScript Canvas Image Conversion</h1> 

<h2>Original Image</h2> 
<p> 
<canvas id='myCanvasElt' width="100" height="100" contenteditable ="true"/> 
    </p> 
<h2>Canvas Image</h2> 
<p id="testguna"> 
</p> 
<h2>Canvas -&gt; PNG Image</h2> 
<p id="pngHolder"> 
</p> 
<button type="button" onClick="convert()">Click</button>  
</body> 
</html>

Изображение enter image description here Изображение я скопирован из W3School и вставить в холст.

источник

2013-07-22 chinna_82

Может быть, посмотрите здесь: http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation – Cherniv

console.log (холст .toDataURL ("изображение/PNG")); что это говорит –

@PatsyIssa я получил Консоль не определена ошибка, даже мой firebug включен. –

var canvas = document.createElement("canvas").innerHTML;

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

var canvas = document.createElement("canvas");

источник

2013-07-25 20:24:58 ericjbasti

Также ваша область видимости находится на элементе холста. var canvas будет локальным для функции, в которой вы ее объявляете. Вам нужно будет передать ее или сохранить на уровне, доступном для ваших других функций. – ericjbasti

Canvas convert to Image show empty Изображение

ответ

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