文章詳情頁

html5 - html2canvas生成的圖片，checkbox和radio的選中項無法截圖。

瀏覽：75日期：2022-12-27 17:53:17

問題描述

通過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='http://www.aoyou183.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>

頁面以及生產圖片：

html5 - html2canvas生成的圖片，checkbox和radio的選中項無法截圖。

問題解答

回答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>