- it技术
- html2canvas.js----html网页指定div保存为图片canvas
1、使用到的插件:html2canvas.js
html2canvas官方网站
2、使用：
<div id="saveWrapX" style="position: relative">
<img src="./imges/testImg1.PNG" draggable="false" style="width: 100%;height: 100%" alt="图片">
</div>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
<script src="./js/html2canvas.js"></script>
html2canvas(document
.getElementById("saveWrapX"),{
scale
:1,
allowTaint
:true,
proxy
:''
}).then(function(canvas
) {
console
.log('保存div为图片的base64',canvas
.toDataURL())
$('#saveWrapX').append(canvas
)
});
3、完整例子（点击图片可生成红色圆圈，可拖动可删除，点击生成图片按钮，即可在body追加canvas标签）：
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>html网页指定div保存为图片canvas
</title
>
<style
>
.container
{
width
: 500px
;
margin
: 0 auto
;
}
#saveWrapX
{
overflow
: hidden
;
}
.circleTips
{
width
: 50px
;
height
: 50px
;
border
-radius
: 100%;
border
: 5px solid red
;
}
.actionDel
{
background
-color
: #
454a4a
;
position
: absolute
;
display
: none
;
width
: 40px
;
cursor
: default;
text
-align
: center
;
font
-size
: 12px
;
color
: white
;
padding
: 5px
;
}
</style
>
</head
>
<body
>
<div
class="container">
<button onclick
=" saveImg()">生成图片
</button
>
<div id
="saveWrapX" style
="position: relative">
<img src
="./imges/testImg1.PNG" draggable
="false" style
="width: 100%;vertical-align: middle" alt
="图片">
</div
>
</div
>
<script src
="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script
>
<script src
="./js/html2canvas.js"></script
>
<script
>
function saveImg(){
html2canvas(document
.getElementById("saveWrapX"),{
scale
:1,
allowTaint
:true,
proxy
:''
}).then(function(canvas
) {
$('body').append(canvas
)
console
.log('div保存图片的base64',canvas
.toDataURL())
});
}
function move() {
let _move
=false;
let _x
,_y
;
let _this
$(".circleTips").on('mousedown',function(e
){
e
.stopPropagation();
_this
=$(this)
_move
=true;
_x
=e
.pageX
-parseInt(_this
.css("left"));
_y
=e
.pageY
-parseInt(_this
.css("top"));
});
$('#saveWrapX').on('mousemove',function(e
){
e
.stopPropagation();
if(_move
){
let x
=e
.pageX
-_x
;
let y
=e
.pageY
-_y
;
_this
.css({top
:y
,left
:x
});
}
}).on('mouseup',function(e
){
e
.stopPropagation();
_move
=false;
});
}
function isShowDelButton() {
$(".circleTips").on("contextmenu", function(){
return false;
})
$(".circleTips").on('mousedown',function(e
) {
e
.stopPropagation();
let top
=e
.offsetY
let left
=e
.offsetX
if (3 == e
.which
) {
$(this).find('.actionDel').css({
display
: "block",
top
:top
,
left
:left
});
}else if (1 == e
.which
) {
$(this).find('.actionDel').css({
display
: "none"
});
}
})
}
function delCircle() {
$('.actionDel').on('mousedown',function (e
) {
e
.stopPropagation();
$(this).parent('.circleTips').remove();
})
}
let offsetX
,offsetY
;
$('#saveWrapX').on('mousemove',function (e
) {
e
.stopPropagation();
let X=$('#saveWrapX').offset().left
let Y=$('#saveWrapX').offset().top
offsetX
=e
.pageX
-X
offsetY
=e
.pageY
-Y
})
$('#saveWrapX').on('mousedown',function (e
) {
e
.stopPropagation();
let creatDom
='<div class="circleTips" style="position: absolute;cursor: move;top: '+(offsetY
-30)+'px;left: '+(offsetX
-30)+'px">' +
'<span class="actionDel" style="">删除</span>' +
'</div>'
$(this).append(creatDom
)
move();
isShowDelButton();
delCircle();
})
</script
>
</body
>
</html
>
4、效果图
