您的位置：首页 > Web前端 > HTML

html2canvas完整demo解决图片跨域问题(已经成功啦啦)

2017-08-10 17:34 716 查看

实现html内容转成图片格式

搞这个东西之前尝试过好多种方法，包括canvas画图，php gd2画图，画的我怀疑人生，我就想实现一个大概名片的效果，不用太炫酷，最后还是选择用html2canvas,但是遇到的问题还是图片的跨域问题，因为跨域问题，需要代理服务器设置header，我迟点说，我的demo是在本地服务器上测的，就是127.0.0.1这个。

赶紧贴一波代码：

css:

*{
margin: 0;
color:#3a3a3a;
}
#content{
padding:10px;
}

.test{
width: 322px;
height: 496px;
text-align: center;
border:1px solid #c0c0c0;
background:#fff;
margin-top: 1px;
margin-left: 1px;

}
canvas{
margin-top: -459px;
margin-right: 5px;
margin-left: 500px;
}
.down{
float: left;
margin: 0px 10px;
}
.header{
border-bottom: 1px solid #c0c0c0;
text-align: center;
padding-top: 10px;
}
.header>div{
width: 164px;
margin: 0 auto;
}
.header img{
width: 29px;
float: left;
margin-right: -10px;
}
.header p{
padding-bottom: 12px;
padding-top: 7px;
}
.main{
text-align: center;
}
.main p:first-child{
font-size: 20px;
color:#969696;
margin-top: 20px;
margin-bottom: 20px;
}
.main p:last-child{
margin-top: 20px;
margin-bottom: 20px;
}
.main :last-child .id{
color:#e67d2c;
display:inline-block;
margin-right: 4px;

}
.footer{
background:#D7D7D7;
text-align: center;
height: 100px;
padding-bottom: 10px;
}
.footer>div>div{
float:left;
}
.footer>div>div.pic{
width: 70px;
height: 70px;
border-radius: 10px;
margin: 10px;
margin-right: 0;
margin-left: 0;
background:#fff;
}
.footer>div{
padding: 10px 22px;
}
.footer>div>div ul{
list-style: none;
padding-left: 22px;
}
.footer>div>div ul li{
margin-top: 5px;
text-align: left;
}
.footer>div>div ul li span{
display: inline-block;
margin-left:15px;
}
.copy{
clear: both;
margin-top: 19px;
}


html:

<body>
<div id="content">
<div class="test">
<div class="header">
<div>
<img src="http://blog.csdn.net/feizhong_web/article/details/u26.png" crossorigin="anonymous">
<p>****麻将</p>
</div>
</div>
<div class="main">
<p>长按二维码下载游戏</p>
<img src="u27.png" class="code" crossorigin="anonymous">
<p>绑定推广员ID <span class="id">824996</span>马上领礼包！</p>
</div>
<div class="footer">
<div>
<div class="pic">
<img src="">
</div>
<div>
<ul>
<li>昵     称：<span>天府雀神</span></li>
<li>推广ID：<span>824996</span></li>
<li>微信号：<span>wyscmi007</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>

<div class="copy">
<button onclick="copy()">截图</button>
<a class="down" href="" download="downImg">下载</a>

</div>


最关键的部分当然是js了，首先我们在外部引入html2canvas.js

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>


然后接下来，还是js

<script>
var pic;
var canvas2 = document.createElement("canvas");
let _canvas = document.querySelector('.test');
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
//可以按照自己的需求，对context的参数修改,translate指的是偏移量
var context = canvas2.getContext("2d");
context.scale(2,2);
html2canvas(document.querySelector('.test'),{canvas:canvas2}).then(function(canvas) {
pic=canvas;
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
document.querySelector(".down").setAttribute('href',canvas.toDataURL());
});
//点击的时候把图片复制到下面那个div下
function copy(){
document.querySelector(".copy").appendChild(pic);
}
</script>


然后效果，是这样，



按下截图后



最后，图片的跨域问题，网上说的是，图片加上这个

，但是怎么试怎么不行，解决方法是也要在在跨域的服务器上设置header设置为允许跨域请求

access-control-allow-origin: * access-control-allow-credentials: true。

如果你的问题也解决了，记得给我一个赞哟。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  canvas html2canvas 跨域
相关文章推荐
新的分享
章节导航