Я пытаюсь создать изображение из холста HTML 5, но это не "рендеринг" содержимого изображения с холста.
Вот код: http://jsfiddle.net/9kQPk/
Он должен быть простым, я создаю холст, устанавливаю несколько вещей и изображение с помощью функции drawImage, но когда я пытаюсь создать компонент img html, изображение с холста не появляется... Вот JS:
$('#drawing').css("visibility", "visible");
var drawing = document.getElementById("drawing");
var con = drawing.getContext("2d");
drawing.setAttribute("width", 500);
drawing.setAttribute("height", 200);
con.fillStyle = "#FF0000";
con.fillRect(0, 0, 500, 200);
var img = new Image();
img.src = "http://www.deque.com/wbcntnt928/wp-content/dquploads/jquery_logo.png";
img.onload = function() {
con.drawImage(img, 0, 0, 250, 250);
};
//Generate Image
var drawing = document.getElementById("drawing");
var dataURL = drawing.toDataURL();
document.getElementById("result").src = dataURL;
Благодарю!
Вы получаете содержимое холста, прежде чем рисовать изображение, поместите код генерируемого изображения в функцию onload
var img = new Image();
img.onload = function() {
con.drawImage(img, 0, 0, 250, 250);
//Generate Image
var drawing = document.getElementById("drawing");
var dataURL = drawing.toDataURL();
document.getElementById("result").src = dataURL;
};
img.src = "http://www.deque.com/wbcntnt928/wp-content/dquploads/jquery_logo.png";
обратите внимание, что изображение должно быть того же источника, что и веб-страница, чтобы его можно было сохранить.
console.log(dataURL)
сразу после его установки, содержит ли он какие-либо данные? Если это произойдет, если вы скопируете эту строку и вставите ее в качестве URL-адреса в новую вкладку, отобразится ли изображение? (и, конечно, консоль показывает какие-либо ошибки?)