建设模板网站,中国网络平台排名前十,wordpress文章中写代码,哪里做网站排名实现的思路大概就是#xff0c;先将dom转化为canvas画布#xff0c;再对canvas进行裁切#xff0c;然后通过canvas api生成图片#xff0c;这里用到了一个库html2canvas 效果如图#xff1a; 首先实现框选效果#xff1a;
const mousedownEvent (e) {moveX 0;mo… 实现的思路大概就是先将dom转化为canvas画布再对canvas进行裁切然后通过canvas api生成图片这里用到了一个库html2canvas 效果如图 首先实现框选效果
const mousedownEvent (e) {moveX 0;moveY 0;const [startX, startY] [e.clientX, e.clientY];x startX - viewer.getBoundingClientRect().left;y startY - viewer.getBoundingClientRect().top;const divDom document.createElement(div);divDom.id screenshot;divDom.width 1px;divDom.height 1px;divDom.style.position absolute;divDom.style.top y px;divDom.style.left x px;const closeIcon document.createElement(span);closeIcon.className outline-close-icon;closeIcon.textContent x;divDom.appendChild(closeIcon);closeIcon.addEventListener(click, () {divDom.remove();});// document.body.appendChild(divDom)viewer.appendChild(divDom);const moveEvent (e) {moveX e.clientX - startX;moveY e.clientY - startY;if (moveX 0) {divDom.style.width moveX px;} else {divDom.style.width -moveX px;divDom.style.left e.clientX - viewer.getBoundingClientRect().left px;}if (moveY 0) {divDom.style.height moveY px;} else {divDom.style.height -moveY px;divDom.style.top e.clientY - viewer.getBoundingClientRect().top px;}};window.addEventListener(mousemove, moveEvent);window.addEventListener(mouseup, () {window.removeEventListener(mousemove, moveEvent);window.removeEventListener(mousedown, mousedownEvent);document.querySelector(body).style.cursor default;});
};
window.addEventListener(mousedown, mousedownEvent);全码
const viewer document.getElementById(viewer);
let canvas;
document.getElementById(screen-button).addEventListener(click, (e) {// 创建一个canvas画布if (canvas) {canvas.remove();}canvas document.createElement(canvas);canvas.setAttribute(id, bg_canvas);canvas.style.position absolute;canvas.style.zIndex 2;canvas.style.left 0;canvas.style.top 0;canvas.style.width 100%;canvas.style.height 100%;viewer.appendChild(canvas);document.querySelector(body).style.cursor crosshair;let moveX;let moveY;let x;let y;const mousedownEvent (e) {moveX 0;moveY 0;const [startX, startY] [e.clientX, e.clientY];x startX - viewer.getBoundingClientRect().left;y startY - viewer.getBoundingClientRect().top;const divDom document.createElement(div);divDom.id screenshot;divDom.width 1px;divDom.height 1px;divDom.style.position absolute;divDom.style.top y px;divDom.style.left x px;const closeIcon document.createElement(span);closeIcon.className outline-close-icon;closeIcon.textContent x;divDom.appendChild(closeIcon);closeIcon.addEventListener(click, () {divDom.remove();});// document.body.appendChild(divDom)viewer.appendChild(divDom);const moveEvent (e) {moveX e.clientX - startX;moveY e.clientY - startY;if (moveX 0) {divDom.style.width moveX px;} else {divDom.style.width -moveX px;divDom.style.left e.clientX - viewer.getBoundingClientRect().left px;}if (moveY 0) {divDom.style.height moveY px;} else {divDom.style.height -moveY px;divDom.style.top e.clientY - viewer.getBoundingClientRect().top px;}};window.addEventListener(mousemove, moveEvent);window.addEventListener(mouseup, () {window.removeEventListener(mousemove, moveEvent);window.removeEventListener(mousedown, mousedownEvent);document.querySelector(body).style.cursor default;if (!moveX) {return;}// 把body转成canvashtml2canvas(viewer, {scale: 1,// allowTaint: true,useCORS: true //跨域使用}).then(canvas2 {let capture_x, capture_y;let width moveX;let height moveY;if (width 0) {//从左往右画capture_x startX - canvas.getBoundingClientRect().left 1;} else {//从右往左画capture_x x width 1;}if (height 0) {//从上往下画capture_y y 1;} else {//从下往上画capture_y y height 1;}printClip(canvas2, capture_x, capture_y, Math.abs(width), Math.abs(height));moveX 0;canvas.remove();});});};window.addEventListener(mousedown, mousedownEvent);
});/*** 打印截取区域* param canvas 截取的canvas* param capture_x 截取的起点x* param capture_y 截取的起点y* param capture_width 截取的起点宽* param capture_height 截取的起点高*/
async function printClip(canvas2, capture_x, capture_y, capture_width, capture_height) {// 创建一个用于截取的canvasconst clipCanvas document.createElement(canvas);clipCanvas.width capture_width;clipCanvas.height capture_height;// 截取clipCanvas.getContext(2d).drawImage(canvas2, capture_x, capture_y, capture_width, capture_height, 0, 0, capture_width, capture_height);const clipImgBase64 clipCanvas.toDataURL();// console.log(clipImgBase64-, clipImgBase64);// console.log(clipImgBase64-, clipImgBase64.replace(/^data:image\/\w;base64,/, ));const obj {// file: new File([this.blob],main.audio,{ type: audio/mp3 })file: new File([base64ToBlob(clipImgBase64.replace(/^data:image\/\w;base64,/, ), image/png)], test.png, { type: image/png })};// 生成图片// var clipImg new Image()// clipImg.src clipImgBase64downloadIamge(clipImgBase64)
}/*** 下载保存图片* param imgUrl 图片地址*/
function downloadIamge(imgUrl) {// 生成一个a元素const a document.createElement(a);// 创建一个单击事件const event new MouseEvent(click);// 生成文件名称const timestamp new Date().getTime();const name imgUrl.substring(22, 30) timestamp .png;a.download name;// 将生成的URL设置为a.href属性a.href imgUrl;// 触发a的单击事件 开始下载a.dispatchEvent(event);
}// 将Base64编码转换为Blob对象
function base64ToBlob(base64, type) {const byteCharacters atob(base64);const byteArrays [];for (let offset 0; offset byteCharacters.length; offset 512) {let slice byteCharacters.slice(offset, offset 512);let byteNumbers new Array(slice.length);for (let i 0; i slice.length; i) {byteNumbers[i] slice.charCodeAt(i);}let byteArray new Uint8Array(byteNumbers);byteArrays.push(byteArray);}let blob new Blob(byteArrays, { type: type });return blob;
}
坑
如果生成图片样式有问题 html就用内联样式当截图片的时候如果不识别 就将图片url转化为base64
