집 > 기사 > 웹 프론트엔드 > JS div 모듈 스크린샷 및 다운로드 기능 구현

JS div 모듈 스크린샷 및 다운로드 기능 구현

小云云원래의: 2018-01-15 10:39:142796검색

이 글은 주로 p 모듈의 스크린샷과 다운로드 기능의 JS 구현을 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 모두에게 도움이 되기를 바랍니다.

먼저 2개의 js 파일을 소개해야 합니다.

 <script type="text/javascript" src="js/html2canvas.js"></script>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

주로 "X" 종료 이미지 아이콘을 생성하기 위해 CSS 스타일을 추가합니다.

body{background: #ccc}
#dw{position: absolute;top: 10px;left:10%;height: 620px;width:1030px;background: #fff; border:1px solid black;padding: 10px}
.close{
 position:relative;
 left: 10px;
 width:0.2em;
 height:1em;
 background: #333;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 display: inline-block;
}
.close:after{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width:0.2em;
 height:1em;
 background: #333;
 -webkit-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -o-transform: rotate(270deg);
 -ms-transform: rotate(270deg);
 transform: rotate(270deg);
}

모든 p 모듈에 쓰고, 어떤 위치에서든 스크린샷

<!-- 要截图的p main 蓝色区域 -->
<p id="main" style="width: 50%; margin-left: 100px;padding: 50px;height: 400px;background: #5a90a0">
　　<p style="height: 200px;width: 200px;background: #ccc;"></p>
　　<p style="height: 30px;width: 168px;border:2px solid black;background: red;text-align: center;" onclick="doScreenShot()">截图</p>
</p>
<!-- 生成图片展示的p dw-->
<p id="dw" >
　　<p style="float: right;width: 25px;height: 25px;" title="关闭" onclick="closeok()">
　　　　<span class="close"></span>
　　</p> 
</p>

페이지 효과는 다음과 같습니다.

js 코드는 다음과 같습니다.

$("#dw").hide();
//关闭图片
function closeok(){
 $("#dw").hide();
}
//点击截图
function doScreenShot(){
 $("#dw").show();
 html2canvas($("#main"), {
  onrendered: function(canvas) {
   canvas.id = "mycanvas"; 
   var mainwh=$("#main").width(); 
   var mainhg=$("#main").height();
   var img = convertCanvasToImage(canvas);
   console.log(img);
   //document.body.appendChild(img);
   $("#dw").append(img) //添加到展示图片p区域
   img.onload = function() {
    img.onload = null;
    canvas = convertImageToCanvas(img, 0, 0, 1024, 600); //设置图片大小和位置
    img.src = convertCanvasToImage(canvas).src;
    $(img).css({
     background:"#fff"  
    });
    //调用下载方法 
     if(browserIsIe()){ //假如是ie浏览器    
      DownLoadReportIMG(img.src);
     }else{
      download(img.src)
     }
    }
   }    
 });
} 
//绘制显示图片 
function convertCanvasToImage(canvas) {
 var image = new Image();
 image.src = canvas.toDataURL("image/png"); //获得图片地址
 return image;
}
//生成canvas元素，相当于做了一个装相片的框架
function convertImageToCanvas(image, startX, startY, width, height) {
 var canvas = document.createElement("canvas");
 canvas.width = width;
 canvas.height = height;
 canvas.getContext("2d").drawImage(image, startX, startY, width, height, 20, 20, 960, 600); //在这调整图片中内容的显示（大小,放大缩小,位置等）
 return canvas;
}
 function DownLoadReportIMG(imgPathURL) {
 //如果隐藏IFRAME不存在，则添加
 if (!document.getElementById("IframeReportImg"))
  $(&#39;<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>&#39;).appendTo("body");
 if (document.all.IframeReportImg.src != imgPathURL) {
  //加载图片
  document.all.IframeReportImg.src = imgPathURL;
 }
 else {
  //图片直接另存为
  DoSaveAsIMG();
 }
}
function DoSaveAsIMG() {
 if (document.all.IframeReportImg.src != "about:blank")
  window.frames["IframeReportImg"].document.execCommand("SaveAs");
}
// 另存为图片
function download(src) {
 var $a = $("<a></a>").attr("href", src).attr("download", "img.png");
 $a[0].click();
}
//判断是否为ie浏览器
function browserIsIe() {
 if (!!window.ActiveXObject || "ActiveXObject" in window)
  return true;
 else
  return false;
}

설명: 여기서 핵심 스크린샷 코드는

html2canvas입니다. (dom, { onrendered: function(canvas) {}) 메소드는 플러그인에서 제공됩니다. 그 중 dom은 스크린샷을 찍고 싶은 요소 모듈입니다. 그 기능은 이 매개변수 캔버스를 img 그림 요소로 구성하는 것입니다. 호출되는 것은 별도의 convertCanvasToImage() 메서드입니다. html2canvas（dom, { onrendered: function(canvas) {})方法，是插件提供的。其中：dom是你要截图的元素模块

它的作用是把这个参数canvas形成一个img图片元素。调用的是单另的convertCanvasToImage（）方法，

其中： image.src = canvas.toDataURL("image/png");

이 중 image.src = canvas.toDataURL("image/png");이 문장은 다음과 같이 사용됩니다. 이미지 주소를 생성합니다. 그리고 이 사진은 당신의 가로채기된 요소입니다. 사진 주소로 처리가 쉽습니다. 디스플레이 효과를 제공하기 위해 id="dw" 요소에 방금 추가했습니다. 사실 이정도면 충분하지만 캔버스로 다시 설치해봤습니다.

나중에 이미지 로딩 방법: onload()에 속성을 추가하여 자동으로 다운로드 방법 실행: IE 브라우저(온라인에서 찾은 방법)와 제가 직접 생성한 다운로드 방법을 구분합니다. 다운로드 방법은 여러가지가 있으니 원하는대로 선택하시면 됩니다.

물론, 내 다운로드(src) 다운로드 방법은 IE에도 적용 가능합니다. 원리는 매우 간단하므로 요소를 생성하고 메서드를 직접 호출하면 됩니다.

JS div 모듈 스크린샷 및 다운로드 기능 구현

관련 기사