0 效果
1 下载html2canvas
npm install html2canvas --save
2 创建ClipScreen.js
import html2canvas from 'html2canvas';
// 样式
const cssText = {box: 'overflow:hidden;position:fixed;left:0;top:0;right:0;bottom:0;background-color:rgba(255,255,255,0.9);z-index: 100000;',img: '',mask: 'position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.6);',rect: 'position:absolute;border:1px solid #3e8ef7;box-sizing:border-box;cursor:move;user-select:none;background: url() no-repeat;',toolBox: 'position:absolute;top:0;left:0;padding:0 10px;background:#eee;line-height:2em;text-align:right;',toolBtn: 'font-weight:bold;color:#111;margin:0 1em;user-select:none;font-size:12px;cursor:pointer;',
}
/*** dom节点截图工具（基于html2canvas）* dom: 要截图的目标dom* options: { * // 以下三个回调方法作用域this指向构造函数* success: function(res), //截图完成触发 参数为截图结果* fail: function(), //取消截图触发* complete: function(), //截图结束触发 success和fail都会触发* }* * 调用示例：* new ClipScreen(dom节点, {* success: function (res) {},* complete: function () {},* });*/
class ClipScreen {constructor(dom, options) {if (window.ClipScreen) return false;window.ClipScreen = this;this.dom = dom;this.options = options;html2canvas(this.dom, {useCORS: true}).then((canvas) => {let dataURL = canvas.toDataURL("image/png");this.imgUrl = dataURL;this.start();});}// 初始化start() {this.border = 2; //用于计算选区拖拽点和边界的判断this.win_w = window.innerWidth;this.win_h = window.innerHeight;let box = this.box = document.createElement('div');box.id = 'ClipScreen';box.style.cssText = cssText.box;let img = document.createElement('img');img.style.cssText = cssText.img;img.src = this.imgUrl;let mask = document.createElement('div');mask.style.cssText = cssText.mask;box.appendChild(img);box.appendChild(mask);document.body.appendChild(box);img.onload = (e) => {let w = img.offsetWidth,h = img.offsetHeight,win_w = window.innerWidth,win_h = window.innerHeight,left = (win_w - w) / 2,top = (win_h - h) / 2;img.style.position = 'absolute';img.style.left = left + 'px';img.style.top = top + 'px';img.style.width = w + 'px';img.style.height = h + 'px';this.axis = {left,top}this.img = img;this.bindEvent(mask);}}// 绑定蒙版事件、键盘事件bindEvent(mask) {document.onkeydown = (e) => {if (e.keyCode == 27) {this.cancel();}}mask.onmousedown = (e) => {let offsetX = e.offsetX,offsetY = e.offsetY;document.onmousemove = (e) => {let x = e.offsetX,y = e.offsetY,sx = offsetX,sy = offsetY,w = Math.abs(offsetX - x),h = Math.abs(offsetY - y);if (x < offsetX) sx = x;if (y < offsetY) sy = y;this.createRect(sx, sy, w, h);}document.onmouseup = (e) => {this.moveToolBox();this.rect.style.pointerEvents = 'initial';this.unbindMouseEvent();}}}// 创建矩形截图选区createRect(x, y, w, h) {let rect = this.rect;if (!rect) {rect = this.rect = document.createElement('div');rect.style.cssText = cssText.rect;rect.style.backgroundImage = 'url(' + this.imgUrl + ')';// this.newImg = document.createElement('img');// this.newImg.style.cssText = cssText.rect_img;// rect.appendChild(this.newImg);let doms = this.createPoints(rect);this.box.appendChild(rect);this.bindRectEvent(doms);}let border = this.border;if (x <= border) x = border;if (y <= border) y = border;if (x + w >= this.win_w - border) x = this.win_w - border - w;if (y + h >= this.win_h - border) y = this.win_h - border - h;rect.style.pointerEvents = 'none';rect.style.display = 'block';rect.style.left = x + 'px';rect.style.top = y + 'px';rect.style.width = w + 'px';rect.style.height = h + 'px';rect.style.backgroundPosition = (-x + this.axis.left - 1) + 'px ' + (-y + this.axis.top - 1) + 'px';if (this.toolBox) this.toolBox.style.display = 'none';}// 创建截图选区各个方位拉伸点createPoints(rect) {letlt = document.createElement('span'),tc = document.createElement('span'),rt = document.createElement('span'),rc = document.createElement('span'),rb = document.createElement('span'),bc = document.createElement('span'),lb = document.createElement('span'),lc = document.createElement('span');let c_style = 'position:absolute;width:5px;height:5px;background:#3e8ef7;';lt.style.cssText = c_style + 'left:-3px;top:-3px;cursor:nw-resize;';tc.style.cssText = c_style + 'left:50%;top:-3px;margin-left:-3px;cursor:ns-resize;';rt.style.cssText = c_style + 'right:-3px;top:-3px;cursor:ne-resize;';rc.style.cssText = c_style + 'top:50%;right:-3px;margin-top:-3px;cursor:ew-resize;';rb.style.cssText = c_style + 'right:-3px;bottom:-3px;cursor:nw-resize;';bc.style.cssText = c_style + 'left:50%;bottom:-3px;margin-left:-3px;cursor:ns-resize;';lb.style.cssText = c_style + 'left:-3px;bottom:-3px;cursor:ne-resize;';lc.style.cssText = c_style + 'top:50%;left:-3px;margin-top:-3px;cursor:ew-resize;';let res = {lt,tc,rt,rc,rb,bc,lb,lc}for (let k in res) {rect.appendChild(res[k])}res.rect = rect;return res;}// 生成 、移动工具moveToolBox() {let toolBox = this.toolBox;if (!toolBox) {toolBox = this.toolBox = document.createElement('div');toolBox.style.cssText = cssText.toolBox;let save = document.createElement('span'),cancel = document.createElement('span');save.innerText = '完成';cancel.innerText = '取消';save.style.cssText = cancel.style.cssText = cssText.toolBtn;toolBox.appendChild(cancel);toolBox.appendChild(save);this.box.appendChild(toolBox);this.bindToolBoxEvent(save, cancel);}toolBox.style.display = 'block';let border = this.border;let t_w = this.toolBox.offsetWidth,t_h = this.toolBox.offsetHeight,r_t = this.rect.offsetTop,r_h = this.rect.offsetHeight;let t = r_t + r_h + 10,l = this.rect.offsetLeft + this.rect.offsetWidth - t_w;if (l <= border) l = border;if (t >= this.win_h - border - t_h) t = r_t - t_h - 10;if (r_h >= this.win_h - border - t_h) {t = r_t + r_h - t_h - 10;l -= 10;}toolBox.style.top = t + 'px';toolBox.style.left = l + 'px';}// 绑定工具栏事件bindToolBoxEvent(save, cancel) {save.onclick = () => {this.success();}cancel.onclick = () => {this.cancel();}}// 绑定截图选区事件bindRectEvent(o) {o.rect.addEventListener("mousedown", (e) => {let border = this.border;let $target = e.target;let offsetX = e.x,offsetY = e.y;let r_w = o.rect.offsetWidth,r_h = o.rect.offsetHeight,r_l = o.rect.offsetLeft,r_t = o.rect.offsetTop;if ($target == o.rect) {offsetX = e.offsetX;offsetY = e.offsetY;document.onmousemove = (e) => {let dif_x = e.x - offsetX,dif_y = e.y - offsetY;if (dif_x <= border) dif_x = border;if (dif_y <= border) dif_y = border;if (dif_x + r_w >= this.win_w - border) dif_x = this.win_w - border - r_w;if (dif_y + r_h >= this.win_h - border) dif_y = this.win_h - border - r_h;o.rect.style.left = dif_x + 'px';o.rect.style.top = dif_y + 'px';o.rect.style.backgroundPosition = (-dif_x + this.axis.left - 1) + 'px ' + (-dif_y + this.axis.top - 1) + 'px';this.toolBox.style.display = 'none'}} else {document.onmousemove = (e) => {this.toolBox.style.display = 'none'this.transform($target, o, offsetX, offsetY, r_w, r_h, r_l, r_t, e)}}document.onmouseup = (e) => {this.moveToolBox();this.unbindMouseEvent();}})}// 拉伸选区transform($t, o, offsetX, offsetY, r_w, r_h, r_l, r_t, e) {let border = this.border;let x = e.x,y = e.y;if (x <= border) x = border;if (y <= border) y = border;if (x >= this.win_w - border) x = this.win_w - border;if (y >= this.win_h - border) y = this.win_h - border;let dif_x = x - offsetX,dif_y = y - offsetY;let min = 10;let left = r_l,top = r_t,width = r_w,height = r_h;if ($t == o.lt) {if (r_w - dif_x <= min || r_h - dif_y <= min) return false;left = r_l + dif_x;top = r_t + dif_y;width = r_w - dif_x;height = r_h - dif_y;} else if ($t == o.tc) {if (r_h - dif_y <= min) return false;top = r_t + dif_y;height = r_h - dif_y;} else if ($t == o.rt) {if (r_w + dif_x <= min || r_h - dif_y <= min) return false;top = r_t + dif_y;width = r_w + dif_x;height = r_h - dif_y;} else if ($t == o.rc) {if (r_w + dif_x <= min) return false;width = r_w + dif_x;} else if ($t == o.rb) {if (r_w + dif_x <= min || r_h + dif_y <= min) return false;width = r_w + dif_x;height = r_h + dif_y;} else if ($t == o.bc) {if (r_h + dif_y <= min) return false;height = r_h + dif_y;} else if ($t == o.lb) {if (r_w - dif_x <= min || r_h + dif_y <= min) return false;left = r_l + dif_x;width = r_w - dif_x;height = r_h + dif_y;} else if ($t == o.lc) {if (r_w - dif_x <= min) return false;left = r_l + dif_x;width = r_w - dif_x;}o.rect.style.left = left + 'px';o.rect.style.top = top + 'px';o.rect.style.width = width + 'px';o.rect.style.height = height + 'px';o.rect.style.backgroundPosition = (-left + this.axis.left - 1) + 'px ' + (-top + this.axis.top - 1) + 'px';}// 解绑事件unbindMouseEvent() {document.onmousemove = null;document.onmouseup = null;}// 生成base64图片getImagePortion(imgDom, new_w, new_h, s_x, s_y) {let sx = s_x - this.axis.left,sy = s_y - this.axis.top;let t_cv = document.createElement('canvas');let t_ct = t_cv.getContext('2d');t_cv.width = new_w;t_cv.height = new_h;let b_cv = document.createElement('canvas');let b_ct = b_cv.getContext('2d');b_cv.width = imgDom.width;b_cv.height = imgDom.height;b_ct.drawImage(imgDom, 0, 0);t_ct.drawImage(b_cv, sx, sy, new_w, new_h, 0, 0, new_w, new_h);let res = t_cv.toDataURL();return res;}// 完成success() {let imgBase64 = this.getImagePortion(this.img, this.rect.offsetWidth, this.rect.offsetHeight, this.rect.offsetLeft, this.rect.offsetTop);if (this.options) {this.options.success && this.options.success.call(this, imgBase64);}this.close();}// 取消cancel() {if (this.options) {this.options.fail && this.options.fail.call(this);}this.close();}// 关闭close() {if (this.options) {this.options.complete && this.options.complete.call(this);}this.distroy();}// 销毁distroy() {window.ClipScreen = undefined;this.box.remove();}
}
export default ClipScreen3 使用
① 引入ClipScreen.js
② 获取需要截图的div
<div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0;" ref="toImage"><button type="primary" size="mini" @click="screenshot">一键截图</button><div style="background-color: red; margin-top: 20px;"><div style="height: 200px; width: 400px;">123</div><div style="height: 200px; width: 400px;">123</div></div></div>
screenshot() {let canvasItem = this.$refs.toImage;new ClipScreen(canvasItem, {success: function(res) { // 完成截图let screenshotImage = document.createElement('a');screenshotImage.href = res;screenshotImage.download = '网页截图';screenshotImage.click();},fail: function() {}, // 取消截图complete: function(res) {} // 结束截图})}
4 其他
截取iframe内容时，会空白，暂时未解决。
也可以使用 js-web-screen-shot
