成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁(yè)技術(shù)文章
文章詳情頁(yè)

html5 - html2canvas生成的圖片，checkbox和radio的選中項(xiàng)無(wú)法截圖。

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

問(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.piao2010.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>

頁(yè)面以及生產(chǎn)圖片：

html5 - html2canvas生成的圖片，checkbox和radio的選中項(xiàng)無(wú)法截圖。html5 - html2canvas生成的圖片，checkbox和radio的選中項(xiàng)無(wú)法截圖。

問(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>

標(biāo)簽： Html5