我正在使用html2canvas将网络摄像头的快照另存为图像。
但是,它仅保存为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");
由gif的jpg组成,但是它什么都没有改变。
非常感谢 !!
最佳答案
您在上面的评论中说已经可以正常使用了,但是我仍然需要告诉您,受支持的toDataUrl
MIME类型取决于浏览器。
您可以在这里进行测试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
关于javascript - html2canvas,将渲染 Canvas 另存为gif而不是png?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37610813/