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

Question

Я хотел бы иметь возможность загружать элемент холста 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;
}

Answer 1

Мне кажется, это работает:

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

Answer 2

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

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

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

Для этого вам нужно передать id элемента 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

Answer 3

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

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

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

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