【JavaScript】js动态地将html生成图片，手机端长按保存到本地

阿酒在看云

已于 2022-12-06 10:37:14 修改

阅读量1.3w

点赞数 4

文章标签： javascript html 前端

于 2019-04-24 18:15:08 首次发布

本文链接：https://blog.csdn.net/weixin_34727238/article/details/89498847

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <style>
        .my-div{
            background-color: antiquewhite;
			width:100%;
			height:100%;
			position:absolute;
			margin-top:0px;
			margin-left:0px;
        }
		
		
		.content{
		width:100%;
			height:100%;
			position:absolute;
			margin-top:0px;
			margin-left:0px;
		
		}
			
    </style>
</head>
<body>
<div class="my-div"   >
    这是源文件
	<img src="1.jpg" id="imgs"  class="img1" ></img>
</div>

<div class="content">

    <img id="img" class="img"/>
</div>

<script>

window.onload=function(){
    //要转换为图片的dom对象
    var element = document.querySelector('.my-div');
    //要显示图片的img标签
    var image = document.querySelector('#img');
    //调用html2image方法
    html2image(element,image);

	  
    function html2image(source,image) {
        html2canvas(source).then(function(canvas) {
            var imageData = canvas.toDataURL(1);
            image.src = imageData;
    });
    }
	}
</script>
</body>
</html>

注意：

在本地运行的时候，如果不进行上传服务器的操作，图片是无法显示出来的。除非使用的是base64格式的图片，上传到服务器之后就可以进行图片生成了，也可以进行存储。

运行结果如下：

保存结果如下图所示：

因为数据很多时候是动态生成的，所以可以进行两个页面的数据传递，a2页面上输入的数据可以在b2页面上生成一个图片进行保存。

a2.html

  <!DOCTYPE html>
 <html >
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title></title>
  
 </head>
 <body>
     <input type="text" name="username" />
     <input type="button" name="" value="post" onclick="set()"/>
    <script>
         function set(){
             //由于是一个新的技术，你可以通过下面的代码检测你的浏览器是否支持
            if (window.localStorage) {
                 //存储变量的值
                localStorage.name = document.all.username.value;
                 location.href = 'b2.html';
            } else {
                alert("NOT SUPPORT");
             }
         }

    </script>
</body>
 </html>
 <!-- xmlns="http://www.w3.org/1999/xhtml" -->

b2.html

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title></title>
	 <style>
        .my-div{
          background-color: antiquewhite;
			
			width:100%;
			height:100%;
	
			position:absolute;
			margin-top:0px;
			margin-left:0px;
        }
		   .img1{
			position:absolute;
			top:7%;
			left:30%;
			margin-top:0px;
			margin-left:0px;
        }
		 .name{
			position:relative;
			text-align:center;
			top:10%;
			margin-top:0px;
			margin-left:0px;
        }
		
		 .text{
			position:relative;
			text-align:center;
			top:10%;
			margin-top:0px;
			margin-left:0px;
        }
	
		
		.content{
		width:100%;
			height:100%;
			position:absolute;
			margin-top:0px;
			margin-left:0px;
		
		}
			
    </style>
	
   <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
 </head>
 <body>
 <div class="my-div"   >
<img src="1.jpg" id="imgs"  class="img1" ></img> 
 <h1 id="name"  style="height:100px" class="name"> </h1>
   <h2 class="text">您是一个美貌和智慧并重的美男子~~~</h2>
	
</div>


<div class="content">
    <img id="img" class="img"/>
</div>

   <script>
        var value = localStorage["name"];
         <!-- alert(value); -->
        document.getElementById("name").innerHTML=value;
		
		
	window.onload=function(){
    //要转换为图片的dom对象
    var element = document.querySelector('.my-div');
    //要显示图片的img标签
    var image = document.querySelector('#img');
    //调用html2image方法
    html2image(element,image);

	  
    function html2image(source,image) {
        html2canvas(source).then(function(canvas) {
            var imageData = canvas.toDataURL(1);
            image.src = imageData;
    });
    }
	}
     </script>
 </body>
 </html>

运行结果如下：

阿酒在看云

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
【JavaScript】js动态地将html生成图片，手机端长按保存到本地

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2c...
复制链接

扫一扫