如何将div标签内容转换为图像 [英] How to convert div tag content into image

问题描述

您好，

我的asp.net网络应用程序中有一个内容谷歌地图的div标签。

我想将该div转换为图像以便我可以保存它。

任何人都有任何想法吗？

请告诉我。

提前致谢。



我的尝试：



功能genScreenshot（）{

html2canvas（document.getElementById（'dvMap'），{

onrendered：function（canvas）{

$（'＃box1'）。html（）;

$（'＃box1'）。append（canvas）;



if（navigator.userAgent.indexOf（MSIE）> 0 ||

navigator.userAgent.match（/Trident.*rv \：11 \。/））

{

var blob = canvas.msToBlob（）;

window.navigator.msSaveBlob（blob，'Test file.png'）;

}

else {

$（'#test'）。attr（'href'，canvas.toDataURL（image / png））;

$（'＃test'）。attr（'download'，'Test file.png'）;

$（'＃test'）[0] .click（）;

}





}

}）;

}

解决方案

（'＃box1'）。html（）;

（'＃box1'）。append（canvas）;



if（navigator.userAgent.indexOf（MSIE）> ; 0 ||

navigator.userAgent.match（/Trident.*rv \：11 \。/））

{

var blob = canvas .msToBlob（）;

window.navigator.msSaveBlob（blob，'Test file.png'）;

}

else {

（'＃test'）。attr（'href'，canvas.toDataURL（image / png））;

Hello,
I have one div tag which content google map in my asp.net web application.
I want to convert that div into image so i can save it.
Any one have any idea about it?
Please let me know.
Thanks in advance.

What I have tried:

function genScreenshot() {
html2canvas(document.getElementById('dvMap'), {
onrendered: function(canvas) {
$('#box1').html("");
$('#box1').append(canvas);

if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
$('#test').attr('download','Test file.png');
$('#test')[0].click();
}


}
});
}

解决方案

('#box1').html("");

('#box1').append(canvas);

if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
else {

('#test').attr('href', canvas.toDataURL("image/png"));

这篇关于如何将div标签内容转换为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！