微信对话在线图片生成

 

生成jq 文件 html2canvas.js 利用这个就可以在线截图功能，这个在手机版好像不成功！ 有人弄过的话在评论下留下解决方案吧！ 谢啦！！！！

最近用 此方法为客户做了个 没有用到php等程序哦!

立即在线生成:微信对话生成器、微信转账详情生成器、微信零钱页面生成器

看效果的话进这点自己看 “微信对话生成器http://www.168weishang.com/weixinduihua/”

效果：

微信对话生成网页在线截图图片

 

 

 

Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面截图下来。

换句话说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像。

这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。

 

限制

所有的图片都需要在当前域下，这样Html2canvas才能不通过代理去读取到。同样地，如果你的页面上有其他的被跨域内容污染的canvas元素，html2canvas将不能准确渲染下来。

html2canvas不会渲染插件内容：Flash，Java组件，和iframe页面的内容。

 

所以，用户需要在特定的情况下来使用该插件，便能发挥很大的便利。

 

使用方法

html2canvas(element, options);

 

带有回掉函数的：

html2canvas(element, {
    onrendered: function(canvas) {
        // canvas 是最后一个渲染的<canvas> 元素
    }
});

可用参数

 

NameTypeDefaultDescription
allowTaint boolean false Whether to allow cross-origin images to taint the canvas
background string #fff Canvas background color, if none is specified in DOM. Set undefined for transparent
height number null Define the heigt of the canvas in pixels. If null, renders with full height of the window.
letterRendering boolean false Whether to render each letter seperately. Necessary ifletter-spacing is used.
logging boolean false Whether to log events in the console.
proxy string undefined Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
taintTest boolean true Whether to test each image if it taints the canvas before drawing them
timeout number 0 Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.
width number null Define the width of the canvas in pixels. If null, renders with full width of the window.
useCORS boolean false Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy

下面是自己写的供参考：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>微信在线图片生成</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
</head>

<body>

 

<div id="down_button">立即生成</div>



<script> 
$(function(){
				$('#down_button').click(function(){
				var div = $('#iphone').clone(); //要生成的div区域块
					html2canvas($(div),{  		
						onrendered: function(canvas){ //canvas 就是#iphone的生成图片区域
								$(".aaa .aeeee").attr( 'src' , canvas.toDataURL() ) ;
								var html_canvas = canvas.toDataURL();
								$.post('', {order_id:1,type_id:2,html_canvas:html_canvas}, function(json){}, 'json');
								$('.aaa .img').css({display:"none"})
							}
					});
				})


$('.ljbtn span').click(function(){

$('.aaa').css({display:"none"})
$('.aaa .img').css({display:"block"})

})

</script>


</body>
</html>

posted @ 2016-08-31 15:23  uz-net  阅读(3553)  评论(0)  编辑  收藏  举报