HTML로 이미지를 생성하는 방법에는 여러 가지가 있으며, 일부는 phantomjs와 같은 플러그인을 다운로드하고 설치해야 합니다. 조금 번거로운 것 같고 일부는 백그라운드를 통해 구현되지만 개인적으로는 이런 상호 작용을 할 필요가 없으며 서버에서 이러한 제로 타임 파일을 생성할 필요도 없다고 생각합니다. , 직접 페이지에서 이미지를 생성하고 로컬에 저장하는 경우 대답은 '예'입니다. 여기서 소개하는 것은 html2canvas입니다. 이 js는 html을 캔버스로 변환한 다음 변환된 그림을 저장합니다. 구현 방법은 다음과 같습니다.
다음은 생성해야 하는 웹 페이지입니다. Pictures
html 코드는 다음과 같습니다.
<p class="tongxingzheng_bg"> <p class="tongxingcard"> <p class="titlebar">访客通行证</p> <p class="tx_content"> <p class="wl_logo"><img src="$!webPath/resources/images/logo.png" ></p> <p class="xinxi"> <p class="name">$!{data.name}</p> <p class="tongxingma"> <span class="text">通行码:</span> <span class="code">$!{data.number}</span> </p> </p> </p> <p class="itemLine"> <span class="mudi">目的地:</span> <span class="address">$!{data.property}</span> </p> <p class="itemLine"> <p class="item"> <p class="text">人数:</p> <p class="amount">$!{data.persons}</p> </p> <p class="item"> <p class="text">是否有车:</p> <p class="amount">#if($!data.haveCar)有#else 无#end</p> </p> </p> <p class="itemLine"> <span class="youxiaoshijian">有效时间:</span> <span class="date">$!{data.visitingTime}</span> <p class="tishi">当天有效</p> </p> <p class="bottom">进入园区时,出示此通行证给保安</p> </p> <p class="bottomline"> <p class="item" id="saveImg" style="width: 100%;">保存图片</p> </p> </p>
위 html에서 이미지를 생성하고 다운로드하는 js는 다음과 같습니다.
먼저 html2canvas.min.js 파일을 소개합니다 , 그리고 나서:
$(function(){ $("#saveImg").click(function(){ html2canvas($(".tongxingzheng_bg")).then(function(canvas) { var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url window.location.href= imgUri; // 下载图片 }); }); });
html2canvas.min.js의 사용법은 공식 웹사이트에서 다운로드할 수 있습니다. 참고할 수 있는 여러 데모가 있습니다
이 글에서는 방법을 설명합니다. Node.js는 HTML을 이미지로 생성하고 이를 로컬에 저장합니다. 더 많은 관련 콘텐츠 PHP 중국어 웹사이트에 주목하세요.
관련 추천:
위 내용은 js는 html을 이미지로 생성하고 로컬에 저장합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!