微信對話在線圖片生成


 

生成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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM