chenzhiguang
/
SZGD


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  #saveWrapX{
    width: 100vw;
    height: 100vh;
    background: url('./static/images/bac/06.jpg') no-repeat center;
    background-size: cover;
  }
  .save {
    position: absolute;
    bottom: 0;
    left: 0;
  }
</style>
<body>
  <button class="save">保存</button>
<div id="saveWrapX">
  <div class="poster-container">
    <img id="myIMG" src="https://img11.360buyimg.com/n1/jfs/t1/209176/2/871/189838/61431847E0250f26b/d1d0214bf4f39434.jpg" alt="">
  </div>
</div>
</body>
<script src="static/public/jquery.min.js"></script>

<script src="./static/js/html2canvas.js"></script>

<script>  
//点击保存
  $('.save').on('click', function (event) {
    html2canvas(document.getElementById("saveWrapX"), {
      // proxy:'http://fdart-huadong.oss-cn-shanghai.aliyuncs.com',
      useCORS: true,
      scale: 1
    }).then(function (canvas) {
      document.querySelector('.poster-container').appendChild(canvas);
      let canvas1 = $('.poster-container canvas')
      let posterImage = document.getElementById("myIMG")
      posterImage.src = canvas1[0].toDataURL("image/jpg")
    })

  });
  </script>

</html>