html如何实现图片的删除,使用原生js、html2canvas来实现拖拽标记（删除标记）并截取图片范围的dom结构变成一张图片...

* {

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;

}

截图

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[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.οnmοusedοwn= 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;

}

}

代码写得比较简陋，如果有好的修改优化方法，希望各位码友能留言提出意见，一起进步。

打开App，阅读手记