2016-06-03 1 views
0

Я использую html2canvas для сохранения моментального снимка с веб-камеры в качестве изображения.html2canvas, сохранить рендер в качестве gif вместо png?

Тем не менее, за исключением только в формате PNG, я пытаюсь сохранить его как GIF, но не может узнать, как это сделать

До сих пор это моя функция:

renderCanvasImage: function(){ 
setTimeout(function() { 

    // Add image with Quote to Canvas (hidden). 
    html2canvas($('.snap'), { 
    onrendered: function (canvas) { 
     document.body.appendChild(canvas).id = 'hidden'; 
     var canvas = document.getElementById('hidden'); 

     var image = new Image(); 
     //Create a new Image with url 
     image.src = canvas.toDataURL("image/.png"); 

     // Look at URI only and assign to localStorage 
     imageURI = image.src; 
     localStorage.setItem('image', imageURI); 

     //****TODO better removal*/ 
     $('#cameraContainer, .wrapperInfo').hide(); 

     $('#result a, #result img').fadeOut(100).remove(); 
     $(image).appendTo('#result'); 
     $('#result').fadeIn(200); 


     //Send Data to DB 
     tibo.setData(); 

     //PopUp Message 
     tibo.popupMsg(); 
    } 
    }); 
}, 1000); 

},

Я пытался заменить следующее:

  image.src = canvas.toDataURL("image/.png"); 

по JPG в GIF, но это не меняет что-нибудь .... любые советы, чтобы эта работа будет потрясающей!

Большое спасибо!

+0

попробовать 'image.src = canvas.toDataURL ("изображение/PNG");' - без точки, прежде чем детские –

+0

я просто попытался image.src = холст .toDataURL ("изображение/GIF"); и image.src = canvas.toDataURL ("image/jpg"); Это все еще сохраняется в png ... :( – tibewww

+0

'canvas.toDataURL ('image/jpeg')' вместо jpg? –

ответ

1

Вы упомянули в комментариях выше, что у вас есть работа, однако я все еще чувствую необходимость сообщить вам, что поддерживаемые типы mime toDataUrl зависят от браузера.

Вы можете проверить его здесь https://jsfiddle.net/v91y0zqr/

Вот визуальный пример с еще более мим типов: http://kangax.github.io/jstests/toDataUrl_mime_type_test/

Все браузеры я протестировал (Firefox, Chrome, Opera, IE) сделал поддержку image/png и image/jpeg

Кроме того, Chrome может экспортировать image/webp

Кроме того, Firefox может экспортировать image/bmp

Результаты могут отличаться.

Так что, хотя теоретически canvas.toDataURL("image/gif"); должен создать GIF-изображение, браузер все же может решить создать PNG (это резерв по умолчанию).

Вы можете прочитать больше о toDataUrl здесь: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

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