html5 - html2canvas生成的图片，checkbox和radio的选中项无法截图。
问题描述
通过html2canvas生成一张图片，发现checkbox选中项并没有截图成功。
<!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='https://www.haobala.com/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>
页面以及生产图片：
问题解答
回答1：可以用的，因为你已进入页面就生成图片了，后面的点击就没效果了，可以这么着。
<!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>
网公网安备