rasterizeHTML.allinone.js浏览器截图截屏

发布时间：2017-04-07, 15:58:14 分类：HTML | 编辑 off 网址 | 辅助

正文 992字数 1,344,149阅读

<script type="text/javascript" src="rasterizeHTML.allinone.js"></script>

<canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>

<div id="thehtml" style="display: none;">
    <style>
        .test {
          font-size: 20px;
          background-color: yellow;
        }
    </style>
    <div class="test">Render this</div>
</div>
<a onclick="ss();">截图</a>
<script>
function ss(){
	var canvas = document.getElementById("canvas"),
		html_container = document.getElementById("thehtml"),
		html = html_container.innerHTML;

	rasterizeHTML.drawHTML(html, canvas);
}

</script>

Run code

Cut to clipboard

rasterizeHTML.allinone.js
Github项目地址
知乎新版意见反馈的截屏功能在web上是如何实现的？

点击web右下角的反馈按钮，会自动截取当前界面（包括展开的评论界面也能截取）。请问前端是如何实现的？

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

标签: 前端15 js139 JavaScript51 浏览器26 截屏2 截图3

有过 4 条评论 »

广西南宁市 2017-04-07, 16:01:02

<?php if(!$Applessss){?><span id="sssssjjjjjj"><a href="javascript:;" onclick="sjll('<?=$_GET['id']?>');">mobile</a></span>
					<span id="canvasjiepingdivspan"><img src="data:image/png;base64,R0lGODlhFQAQAPZKAABoAABTAAqfBjG5IL7a8ExMTKnO6nl6enp6emRkZFxcXPf39wBhANTm9tPm9jG5Ienp6ajP6gBaAHp5ek1MTAB3AHl5ekLFLFRTVABzAE1NTABNAABEAN7e3mxsbHp6eWxsbWDZPwBHAABvABOlDABuAG1sbABIAEZGRxOmDDG6IZrG5lRUU3Rzc3Nzc3NzdNvb2yGvFXl5eVLPNkHFLHp5eajO6l/ZP2xtbNTl9qGhoFLPN0LFK62trUxMTdnZ2U1MTXR0cyGuFmnfRkJCQuLu+n5+ftbW1v//zP///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEoALAAAAAAVABAAAAfDgEpGg4SFhEqIiYJHjI2OjUaKiAhHFggWNRMHBx8HEzJHCJJKL0dBSaipSUVFLUcuox5HJklDAg0NDg45RSBHOKMJRwlJAgIEyMhFwj2jCkcKSQbTEREGNkUKEB0VFYoYRywrrOTkGAsZSEgZiUBHBRQFPhoa8QU6MAslNyEjiSiPHEFYAKDgjhkFASAiwrBhwx8M1PG4cIGGOgajJEkYMOABR48qJGSUFKCkkBglA4zMuCEFiQ0rR54wJiLmSA4cFAUCADs=" style="vertical-align: middle;"><a href="javascript:;" onclick="sjlljieping();">截屏</a></span><?php }?>
			</p>
			<?php if(!$Applessss){?><div id="sssjjlll"></div>
			
			
					<div id="canvasjiepingdiv" style="display:none;width:100px;height:100px;cursor: row-resize;background: url(data:image/gif;base64,R0lGODlhBQAQAJEDAL+/v4CAgAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAAADACwAAAAABQAQAAACD0QUJnvLnk4atNqLs968AAAh+QQJAAADACwAAAAABQAQAAACD5wNIZHi6l5kip2Ls958FwAh+QQJAAADACwAAAAABQAQAAACD5yPEBIqvx6UbTWEs948FwAh+QQJAAADACwAAAAABQAQAAACD5yPmRASLGKLkr72lN48FQAh+QQJAAADACwAAAAABQAQAAACD5yPqbsQEpyYb1IbX2T8FAAh+QQJAAADACwAAAAABQAQAAACD5yPqcvtEESAosZq8YyzAAAh+QQJAAADACwAAAAABQAQAAACD5yPqWsQEpyYb1IbX2ScFQAh+QQJAAADACwAAAAABQAQAAACD5yPCSGxAhmM0zGXst48FQAh+QQJAAADACwAAAAABQAQAAACD5wNIZHi6l5kip2Ls958FwAh+QQFAAADACwAAAAABQAQAAACD0QUJnvLnk4atNqLs968AAA7);
    background-repeat: no-repeat;
    background-position: center center;" onclick="ggbbimg();"><canvas id="canvasjieping"></canvas></div><?php }?>

Run code

Cut to clipboard


<?php if(!$Applessss){?>
function ggbbimg(){
	<?php if($Applessss)
		echo 'return false;';
	?>
	$('#canvasjieping').css('display','none');
	var canvas = document.getElementById("canvasjieping");
	var img = canvas.toDataURL("image/png");
	//location = img;
	window.open(img);
	location.reload();
}

function sjlljieping(){
	$('#canvasjiepingdivspan').unbind("click");
	$('#canvasjiepingdivspan').html('<img src="/templates/default/5-121204194033-51.gif?v1">');
	
	var nw=document.body.clientWidth;
	var nh=document.body.scrollHeight+145;//document.body.clientHeight;//$('html').height();
	console.log(nh);
	//alert(nh);
	//document.body.scrollHeight;//document.body.clientHeight;
	if(nw>919) nw=919;
	<?php
		if(!$_COOKIE['ddddyidongxxxxoff'])
			{
			//echo 'if(nw>919) nw=919;';
			//else{
			//echo 'nh=nh+'.(abs($_COOKIE['ddddyidongxxxxt'])*2).';';
			//echo 'nw=nw+'.(abs($_COOKIE['ddddyidongxxxxl'])*2).';';
		?>
				nw=nw+56;
				//$('html').css({'left':'0px','top':'0px','position':'absolute'});
				$('#ddddyidongxxxx').attr('style','');
				//$('body').css({'marginLeft':(0-$.cookie('ddddyidongxxxxl'))+'px','marginTop':(0-$.cookie('ddddyidongxxxxt'))+'px'});
				//if($.cookie('ddddyidongxxxxl')>0) $('body').css('margin-left',((0-$.cookie('ddddyidongxxxxl'))/2)+'px');
				//else $('body').css('padding-left',(0-$.cookie('ddddyidongxxxxl'))+'px');
				//$.cookie('ddddyidongxxxxl', '', {expires: 70, path: '/'});
				//$.cookie('ddddyidongxxxxt', '', {expires: 70, path: '/'});
			<?php
		}
	?>

	
	
	nw=nw+2;
	nh=nh+2;
	
	//$('#canvasjieping').css({'width':nw+'px','height':nh+'px'});
	$('#canvasjieping').attr('width',nw+'px');
	$('#canvasjieping').attr('height',nh+'px');
	$('#canvasjieping').css('width','100%');
	$('#canvasjieping').css('height','100%');
	//$('#buttonbody').css('background','#fff');
	$('code').css('max-height','none');
	
		var canvas = document.getElementById("canvasjieping"),
		//html_container = document.getElementById("buttonbody"),
		//html = html_container.innerHTML;
		html = $('html').html();

		rasterizeHTML.drawHTML(html, canvas);
	
		/*var canvas = document.getElementById("canvasjieping"),
			context = canvas.getContext('2d'),
			//html_container = document.getElementById("buttonbodyhtml"),
			html = $('html').html();//html_container.innerHTML;

		rasterizeHTML.drawHTML(html).then(function (renderResult) {
			context.drawImage(renderResult.image, 10, 25);
		});*/

	$('#canvasjiepingdiv').css('display','');
	//$('#canvasjiepingdivspan').css('display','none');
	$('#canvasjiepingdivspan').html('');
	$('code').css('max-height','');
}
<?php
	}
?>

Run code

Cut to clipboard

reply | quote | #¹

广西南宁市 2017-04-07, 16:21:43

如何通过js实现canvas保存图片为png格式并下载到本地！

var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");

location = img;

Run code

Cut to clipboard

reply | quote | #²

广西南宁市 2017-04-24, 14:08:16

php读取一张网络图片并输出给浏览器

<?php
header('content-type: image/png'); 
echo file_get_contents($imgurl);
?>

Run code

Cut to clipboard

if(location.href.indexOf("http://www.lizhenqiu.com/")>-1){ 
alert('ok'); 
} 
var Cts = "bblText"; 
if(Cts.indexOf("Text") >= 0 ) 
{ 
alert('Cts中包含Text字符串'); 
}

Run code

Cut to clipboard

reply | quote | #³

福建省福州市 2018-05-16, 14:05:08

v重播健康

#,广西河池市金城江区,2018-05-16,17:10:20, 啥玩意儿？

reply | quote | #⁴

Records:4 1/1 «‹1 ›»

留下評論

你好，残忍屏蔽广告

确定要清除编辑框内容吗?

该删除操作将不可恢复。

删除取消

激活Windows

转到"设置"以激活Windows。

lizhenqiu blog

rasterizeHTML.allinone.js浏览器截图截屏

相关日志

有过 4 条评论 »

留下評論