[英]html2canvas , save render canvas as a gif instead of a png?
I'm using html2canvas to save a snapshot from the webcam as an image. 我正在使用html2canvas将网络摄像头的快照另存为图像。
However, it save only in png, I'm trying to save it as a gif, but can not find out how to do this 但是,它仅保存为png,我正在尝试将其另存为gif,但是找不到执行该操作的方法
So far this is my function: 到目前为止,这是我的功能:
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);
}, },
I tried to replace the following: 我试图替换以下内容:
image.src = canvas.toDataURL("image/.png");
By jpg of gif, but it doesn't change anything.... any tips to make this work will be amazing !! 由gif的jpg组成,但是它什么都不会改变。
Thanks a lot !! 非常感谢 !!
You said in the comments above that you've got it working, however I still feel the need to tell you that the supported mime types of toDataUrl
depend on the browser. 您在上面的评论中说已经可以正常使用,但是我仍然需要告诉您,
toDataUrl
支持的mime类型取决于浏览器。
You can test it here https://jsfiddle.net/v91y0zqr/ 您可以在这里进行测试https://jsfiddle.net/v91y0zqr/
Here's a visual example with even more mime types: http://kangax.github.io/jstests/toDataUrl_mime_type_test/ 这是一个具有更多mime类型的可视示例: http : //kangax.github.io/jstests/toDataUrl_mime_type_test/
All browsers I've tested (Firefox, Chrome, Opera, IE) did support image/png
and image/jpeg
我测试过的所有浏览器(Firefox,Chrome,Opera,IE)都支持
image/png
和image/jpeg
Additionally, Chrome could export image/webp
此外,Chrome可以导出
image/webp
Additionally, Firefox could export image/bmp
此外,Firefox可以导出
image/bmp
Results may differ for you. 结果可能与您有所不同。
So while in theory canvas.toDataURL("image/gif");
因此,从理论上讲
canvas.toDataURL("image/gif");
should create a GIF image, the browser may still decide to create a PNG (it's the default fallback). 应该创建一个GIF图片,浏览器仍然可以决定创建一个PNG(这是默认的后备广告)。
You can read more about toDataUrl
here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL 您可以在此处阅读有关
toDataUrl
更多信息: https : //developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.