生成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> 元素 } });
可用參數
Name | Type | Default | Description |
---|---|---|---|
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>