html2canvas网页截图之后图片的保存方法

html2canvas 只能在服务器中抓取img,
 如果是在本地编辑文件在浏览器上可以抓取除了img标签外的元素,
 但是节点中的img是抓取不到的
 必须将代码放在服务器中进行对img标签进行抓取
<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
<metahttp-equiv=”X-UA-Compatible”content=”ie=edge”>
<title>Document</title>
<style>
html,body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#bigbox{
width: 100%;
height: 100%;
}
#bigboxul{
width: 100%;
height: 40%;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
}
#bigboxulli{
width: 25%;
height: 50%;
margin: 0;
padding: 0;
list-style: none;
border: 1pxsolid#000;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
#bigboxullidiv{
width: 102px;
height: 102px;
border: 1pxsolid#000;
box-sizing: border-box;
}
#bigboxulli>div>div{
width: 100px;
height: 100px;
border: none;
margin: auto;
padding: 0;
}
#bigboxulli:nth-child(4)>div>div{
background-color: #ff0000;
}
#bigboxulli:nth-child(8)>div>div{
background-color: #ff0000;
}
#bigbox>div{
width: 100%;
height: 60%;
display: flex;
align-items: center;
justify-content: center;
}
#bigbox>div>div{
width: 202px;
height: 202px;
border: 1pxsolid#000;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
#bigbox>div>div>div,#bigbox>div>div>div>div>div{
width: 100px;
height: 100px;
}
button{
position: absolute;
top: 60%;
width: 90px;
height: 45px;
margin: 0;
padding: 0;
background: slateblue;
}
#saveImg{
left: 100px;
}
.stroke{
background-image:url(./img/structure-small2.png);
background-size: 100%100%;
background-repeat: no-repeat;
}
.triangle{
background-image:url(./img/structure-small3.png);
background-size: 100%100%;
background-repeat: no-repeat;
}
.fill{
background-image:url(./img/structure-small1.png);
background-size: 100%100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<divid=”bigbox”>
<ul>
<li>
<divdata-index=”0″><divclass=”cell stroke rotate”></div></div>
</li>
<li>
<divdata-index=”1″><divclass=”cell triangle rotate”></div></div>
</li>
<li>
<divdata-index=”2″><divclass=”cell triangle rotate”></div></div>
</li>
<li>
<divdata-index=”3″><divclass=”cell fill rotate”></div></div>
</li>
<li>
<divdata-index=”4″><divclass=”cell stroke rotate”></div></div>
</li>
<li>
<divdata-index=”5″><divclass=”cell triangle rotate”></div></div>
</li>
<li>
<divdata-index=”6″><divclass=”cell triangle rotate”></div></div>
</li>
<li>
<divdata-index=”7″><divclass=”cell fill rotate”></div></div>
</li>
</ul>
<divid=”box”>
<div>
<divclass=”box”></div>
<divclass=”box”></div>
<divclass=”box”></div>
<divclass=”box”></div>
</div>
</div>
</div>
<buttonid=”saveImg”>截图</button>
<buttonid=”rotate”>旋转</button>
<scriptsrc=”./js/jquery-3.3.1.js”></script>
<scriptsrc=”./js/html2canvas.js”></script>
<scriptsrc=”./js/canvas2image.js”></script>
<script>
;(function(win,doc,undefined){
varpintu = function(){
this.dragitem = document.querySelectorAll(‘#bigbox li>div’);
this.dragParent = document.querySelectorAll(‘#bigbox li’);
this.dragEle = “”;
this.dragitemidex = “”;//记录被拖拽元素的索引值
this.selectEle = “”//点击选择的图片进行旋转
this.box = document.querySelectorAll(‘.box’);
this.ctx = “”;//创建画布
this.rotateBtn = “”;
this.rotateitem = “”;
}
pintu.prototype = {
constructor :pintu,
init :function(){
this.rotateBtn = document.getElementById(‘rotate’);
this.rotateitem = document.querySelectorAll(‘.rotate’);
this.captureBtn = document.getElementById(‘saveImg’);
// this.triangle(0,150,300,0,300,300);
// this.fillsquare(0,0,300,150,0);
// this.strokesquare(0,0,300,150,0);
this.drag();
this.rotate();
this.capture();
this.rotateEle();
},
triangle :function (x1, y1, x2, y2, x3, y3) {
for(leti=0;i<this.triangleCanvas.length;i++){
this.ctx = this.triangleCanvas[i].getContext(‘2d’);
this.ctx.beginPath();
this.ctx.moveTo(x1, y1);
this.ctx.lineTo(x2, y2);
this.ctx.lineTo(x3, y3);
this.ctx.fillStyle = “red”;
this.ctx.closePath();
this.ctx.fill();
}
},
strokesquare :function (x, y, width, height, radius) {
for(leti=0;i<this.strokeCanvas.length;i++){
this.ctx = this.strokeCanvas[i].getContext(‘2d’);
this.ctx.beginPath();
this.ctx.moveTo(x, y+radius);
this.ctx.lineTo(x, y+height-radius);
this.ctx.quadraticCurveTo(x, y+height, x+radius, y+height);
this.ctx.lineTo(x+width-radius, y+height);
this.ctx.quadraticCurveTo(x+width, y+height, x+width, y+height-radius);
this.ctx.lineTo(x+width, y+radius);
this.ctx.quadraticCurveTo(x+width, y, x+width-radius, y);
this.ctx.lineTo(x+radius, y);
this.ctx.quadraticCurveTo(x, y, x, y+radius);
this.ctx.fillStyle = “#fff”;
this.ctx.closePath();
this.ctx.fill();
}
},
fillsquare :function (x, y, width, height, radius) {
for(leti=0;i<this.fillCanvas.length;i++){
this.ctx = this.fillCanvas[i].getContext(‘2d’);
this.ctx.beginPath();
this.ctx.moveTo(x, y+radius);
this.ctx.lineTo(x, y+height-radius);
this.ctx.quadraticCurveTo(x, y+height, x+radius, y+height);
this.ctx.lineTo(x+width-radius, y+height);
this.ctx.quadraticCurveTo(x+width, y+height, x+width, y+height-radius);
this.ctx.lineTo(x+width, y+radius);
this.ctx.quadraticCurveTo(x+width, y, x+width-radius, y);
this.ctx.lineTo(x+radius, y);
this.ctx.quadraticCurveTo(x, y, x, y+radius);
this.ctx.fillStyle = “red”;
this.ctx.closePath();
this.ctx.fill();
}
},
drag :function (params) {
var_this = this;
for(leti=0;i<this.dragitem.length;i++){
_this.dragitem[i].setAttribute(‘draggable’,’true’);//拖拽前要给每个元素添加draggable-true属性;
_this.dragitem[i].ondragstart = function(event){ //拖拽的一瞬间触发此事件
varself = event.target;
_this.dragitemidex = i;
_this.dragEle = this;
varboxX=self.offsetWidth; //优化鼠标位置
varboxY=self.offsetHeight; //让拖拽的鼠标始终在dragitem的中间
event.dataTransfer.setDragImage(this,boxX,boxY); //设置元素被拖拽时跟随鼠标的元素样式以及鼠标的位置
}
_this.dragitem[i].ondrag = function () { //拖拽过程中一直执行
// this.style.visibility=’hidden’; //让当前的盒子隐藏
}
_this.dragitem[i].ondragend = function () { //拖拽结束的时候触发
this.setAttribute(‘draggable’,’false’);
}
}
for(letj=0;j<this.box.length;j++){
_this.box[j].ondragenter = function () { //dragitem被拖拽进入大盒子的一瞬间触发
console.log(this.childNodes.length);
}
_this.box[j].ondragover=function (event) { //dragitem在大盒子中移动时一直触发
event.preventDefault(); //如果想要在ondrop中执行事件,就一定要在ondrapover中阻止事件
}
_this.box[j].ondrop = function (event) { //在目标元素上释放鼠标时触发
varself = event.target;
if(this.childNodes.length>0){
console.log(this.childNodes[0].getAttribute(‘data-index’));
_this.dragitem[_this.dragitemidex].style.visibility=’visible’;
_this.dragitem[_this.dragitemidex].setAttribute(‘draggable’,’true’);
_this.dragParent[this.childNodes[0].getAttribute(‘data-index’)].append(this.childNodes[0]);
this.append(_this.dragEle)
}else{
this.append(_this.dragEle); //在box1中添加新元素
varaX=event.offsetX-self.offsetWidth/2; //优化获取位置
varaY=event.offsetY-self.offsetHeight/2;
};
}
_this.box[j].ondragout = function () { //当被拖拽的元素离开此元素一瞬间时触发的
console.log(“out”+this);
}
}
},
rotateEle :function(){
var_this = this;
for(leti=0;i<_this.rotateitem.length;i++){
_this.rotateitem[i].addEventListener(“click”,function(e){
_this.selectEle = this;
})
}
},
rotate :function (params) {
var_this = this;
vardeg = 0;
_this.rotateBtn.addEventListener(“click”,function(){
deg += 90;
_this.selectEle.style.transform = “rotate(“+ deg +”deg)”
})
},
capture :function (params) {
var_this = this;
_this.captureBtn.addEventListener(‘click’,function (params) {
varcntElem = $(‘#box>div’)[0];
varshareContent = cntElem;//需要截图的包裹的(原生的)DOM 对象
varwidth = shareContent.offsetWidth; //获取dom 宽度
varheight = shareContent.offsetHeight; //获取dom 高度
varcanvas = document.createElement(“canvas”); //创建一个canvas节点
varscale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext(“2d”).scale(scale, scale); //获取context,设置scale
varopts = {
scale:scale, // 添加的scale 参数
canvas:canvas, //自定义 canvas
logging:true, //日志开关,便于查看html2canvas的内部执行流程
width:width, //dom 原始宽度
height:height,
useCORS:true// 【重要】开启跨域配置
};
html2canvas(shareContent, opts).then(function (canvas) {
varcontext = canvas.getContext(‘2d’);
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
console.log(canvas);
// 【重要】默认转化的格式为png,也可设置为其他格式
document.body.appendChild(canvas);
varurl = canvas.toDataURL(“image/png”); //data:image/png;base64
console.log(url)
});
})
}
}
win.pintu = pintu;
}(window,document))
varPinTu = newpintu();
PinTu.init();
</script>
</body>
</html>

(42 Posts)

Leave a Reply