집 > 기사 > 웹 프론트엔드 > js는 html을 이미지로 생성하고 로컬에 저장합니다.

js는 html을 이미지로 생성하고 로컬에 저장합니다.

jacklove원래의: 2018-06-15 16:02:404683검색

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을 이미지로 생성하고 로컬에 저장합니다.

관련 기사