使用原生js、html2canvas来实现拖拽标记（删除标记）并截取图片范围的dom结构变成一张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin:0;
padding:0;
}
html,body {
width:100%;
height:100%;
}
.drag {
position:absolute;
width:50px;
height:50px;
background-color:red;
z-index: 999;
}
.drag span{
margin-left: 38px;
display: none;
}
.drag:hover span{
display: block;
}
section{
position: relative;
}
</style>
</head>
<body>
<section id="capture" style="padding: 10px;height: 400px;width:600px; background: #f5da55">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/bg.png"/>
<div class="drag"></div>
</section>
<button id="jie" style="margin-top: 150px;">截图</button>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/html2canvas.min.js" ></script>
<script>
jie.onclick = function(){
//参考html2canvas的官网的截图api
html2canvas(document.querySelector("#capture")).then(function(canvas){
//把canvas转化成图片
var dataURL = canvas.toDataURL('images/png');
// console.log(typeof dataURL);
console.log(dataURL);
//截取base64的字符串，可以传给后台解析成图片。
var imageDateB64 = dataURL.substring(22);
console.log(typeof imageDateB64);
console.log(imageDateB64);
document.body.appendChild(canvas)
});
}
var div = document.getElementsByTagName("div");
var capture = document.getElementById("capture");
//浏览器可视区域的宽度
var clientW = document.body.clientWidth;
//浏览器可视区域的高度
var clientH = document.body.clientHeight;
window.onresize = function(){
clientW = document.body.clientWidth;
clientH = document.body.clientHeight;
}
for (var i = 0 ;i<div.length;i++) {
div[i].onmousedown = function(e){
var e = e || window.event;
var disX = this.offsetLeft;
var disY = this.offsetTop;
var x = e.pageX - disX;
var y = e.pageY - disY;
var width = this.offsetWidth;
var height = this.offsetHeight;
//拖拽后克隆一个新的div
var dv = this.cloneNode(true);
//在新的div下面追加子元素并添加删除事件
var span = document.createElement("span");
var node = document.createTextNode("x");
span.appendChild(node);
dv.appendChild(span);
//移除被拖拽后的div
span.onclick = function(){
this.parentNode.parentNode.removeChild(this.parentNode);
}
document.onmousemove = function(e){
var e = e || window.event;
var left = e.pageX - x;
var top = e.pageY - y;
if (left < 0) {
left = 0;
}
if (top < 0) {
top = 0;
}
if (left >= clientW - width) {
left = clientW - width;
}
if (top >= clientH - height) {
top = clientH - height;
}
//把div的文档流添加为capture的子元素，使被拖拽后的div也能在点击截图按钮的时候被截取成canvas
capture.appendChild(dv);
dv.style.left = left + "px";
dv.style.top = top + "px";
dv.onmousedown= function(e){
var e = e || window.event;
var disX = dv.offsetLeft;
var disY = dv.offsetTop;
var x = e.pageX - disX;
var y = e.pageY - disY;
var width = dv.offsetWidth;
var height = dv.offsetHeight;
document.onmousemove = function(e){
var e = e || window.event;
var left = e.pageX - x;
var top = e.pageY - y;
if (left < 0) {
left = 0;
}
if (top < 0) {
top = 0;
}
if (left >= clientW - width) {
left = clientW - width;
}
if (top >= clientH - height) {
top = clientH - height;
}
dv.style.left = left + "px";
dv.style.top = top + "px";
}
}
dv.onmouseup = function(){
dv.onmousemove = null;
document.onmousedown = null;
}
}
}
document.onmouseup = function(){
document.onmousedown = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
代码写得比较简陋，如果有好的修改优化方法，希望各位码友能留言提出意见，一起进步。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
