html5 - html2canvas生成的圖片，checkbox和radio的選中項(xiàng)無(wú)法截圖。
問(wèn)題描述
通過(guò)html2canvas生成一張圖片，發(fā)現(xiàn)checkbox選中項(xiàng)并沒(méi)有截圖成功。
<!DOCTYPE html><html><head> <title>html2canvas </title></head><body onload='createImage()'> <p style='height: 100px;width: 100px;background-color: blue'>我是p性別:<input type='checkbox' name='sex'>男<input type='checkbox' name='sex'>女 </p></body><script type='text/javascript' src='http://www.leifengta.com.cn/wenda/html2canvas.js'></script><script type='text/javascript'> function createImage(){html2canvas(document.getElementById(’myPage’),{ allowTaint:true, height: 500}).then(function(canvas) { console.log(canvas); var aTag = document.createElement('a'); aTag.innerHTML = 'This is a test'; aTag.setAttribute('style', 'position:absolute; top:50%; z-index:999'); aTag.setAttribute('href', canvas.toDataURL()); aTag.setAttribute('download', 'myPic.png'); document.body.appendChild(aTag);}); }</script></html>
頁(yè)面以及生產(chǎn)圖片：
問(wèn)題解答
回答1：可以用的，因?yàn)槟阋堰M(jìn)入頁(yè)面就生成圖片了，后面的點(diǎn)擊就沒(méi)效果了，可以這么著。
<!DOCTYPE html><html><head><title> html2canvas</title></head><body id='myPage'><p style='height: 100px;width: 100px;background-color: blue'> 我是p 性別: <input type='checkbox' onchange='createImage()' name='sex'>男 <input type='checkbox' onchange='createImage()' name='sex'>女</p></body><script type='text/javascript' src='https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js'></script><script type='text/javascript'>var aTag = document.createElement('a');aTag.innerHTML = 'This is a test';aTag.setAttribute('style', 'position:absolute; top:50%; z-index:999');document.body.appendChild(aTag);function createImage(){ html2canvas(document.getElementById(’myPage’),{allowTaint:true,height: 500 }).then(function(canvas) { console.log(canvas); aTag.setAttribute('href', canvas.toDataURL()); aTag.setAttribute('download', 'myPic.png'); });}</script></html>
網(wǎng)公網(wǎng)安備