Загрузите элемент холста Html5 как изображение с расширением файла с помощью Javascript

Я хотел бы иметь возможность загрузить элемент холста Html5 в виде изображения с расширением файла с помощью Javascript.

Библиотека CanvasToImage, похоже, не может этого достичь.

Вот мой код, который вы видите на этом JsFiddle.

<div id="canvas_container">
</div>
<p>
<a href='#' id="create_image">create</a> 
<a href="#" id="download_image">download</a>
</p>




$("#create_image").click(function() {
var cnvs = createSmileyOnCanvas();
$('#canvas_container').append(cnvs);
});


$("#download_image").click(function() {    
var img = $('#smiley_canvas').toDataURL("image/png");
var uriContent = "data:application/octet-stream," + encodeURIComponent(img);
window.open(uriContent, 'download smiley image');
});



function createSmileyOnCanvas() {
var canvas = document.createElement('canvas');      
canvas.id = 'smiley_canvas';    
var ctx = canvas.getContext('2d');        

// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
ctx.stroke();

return canvas;
}

ОТВЕТЫ

Ответ 1

Чтобы заставить/предложить имя файла в диалоговом окне загрузки браузера, вам нужно отправить заголовок Content-Disposition: attachment; filename=foobar.png.

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

Если вам действительно нужно имя файла, вы можете попробовать использовать новый атрибут загрузки в a, <a href="put stuff here" download="filename here">. Тем не менее, он не очень широко поддерживается.

Другой альтернативой было бы сначала отправить данные на сервер с помощью ajax, а затем перенаправить браузер на некоторую серверную сторону script, которая затем будет обслуживать данные с правильным заголовком.

Ответ 2

Кажется, это работает для меня:

<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', canvas.toDataURL());" download="MyImage.png" href="#" target="_blank">Download Drawing</a>

Ответ 3

Привет, я создал плагин jquery, который позволит вам сделать ту же задачу с легкостью, но также использовать php для загрузки изображения. позвольте мне объяснить, как это работает.

Плагин имеет 2 подфункции, которые вы можете самостоятельно вызвать для добавления изображения на холст, а другой - для загрузки текущего изображения, лежащего на холсте.

Добавить изображение на холст

Для этого вам необходимо передать идентификатор элемента canvas и путь к изображению, которое вы хотите добавить

скачать изображение с холста

Для этого вам нужно передать идентификатор элемента canvas

 $('body').CanvasToPhp.upload({
    canvasId: "canvas",   // passing the canvasId
    image: "455.jpg"      // passing the image path
});

// downloading file
$('#download').click(function(){
    $('body').CanvasToPhp.download({
        canvasId: "canvas"   // passing the canvas id
    });  // 
});

Сначала вам нужно скачать файл плагина, который вы можете найти здесь http://www.thetutlage.com/post=TUT213

Я также создал небольшую демонстрацию http://thetutlage.com/demo/canvasImageDownload