上海网站设计开发公司,oa系统入口,wordpress多语言企业网站,教学网页制作使用html2canvas进行截图操作
在 Vue 中使用 html2canvas 将 HTML 元素#xff08;如包含贝塞尔曲线的 Canvas/SVG#xff09;转换为图片
下载html2canvas
npm install html2canvas在页面中使用#xff0c;要截取哪个div的内容#xff0c;先给这个div加一个ref标…使用html2canvas进行截图操作
在 Vue 中使用 html2canvas 将 HTML 元素如包含贝塞尔曲线的 Canvas/SVG转换为图片
下载html2canvas
npm install html2canvas在页面中使用要截取哪个div的内容先给这个div加一个ref标识如ref“html_container”
主要用到的
具体代码
templatediv classCanvasPage refhtml_container!-- 未处理时的canvas画布数据 --canvas :idcanvas 002 :styleposition: absolute; /canvas!-- 使用赛贝尔曲线以及笔锋处理之后的画布数据 --canvas:idcanvas 001pointerdown.stoponPointerDown:styleposition: absolute; touchstartonTouchstart/canvasdiv classCanvasPageSaveel-button clicktoSave typeprimary保存当前页面/el-button/div/div
/templatescript setup
import { ref, reactive, onMounted } from vue;
import { Bezier } from bezier-js;
import html2canvas from html2canvas
let html_container ref(null);
let canvas, ctx;
let canvasCover, ctxCover;
const winH window.innerHeight,winW window.innerWidth;let isMove false;
// canvas初始化
const initCanvas () {canvas document.getElementById(canvas001);ctx canvas.getContext(2d, {antialias: true, // 抗锯齿});canvas.width winW; // canvas宽度canvas.height winH; // canvas高度ctx.lineWidth 2; // 画线默认宽度ctx.strokeStyle red; // 设置颜色// 复制出来一份原始的canvas画线数据canvasCover document.getElementById(canvas002);ctxCover canvasCover.getContext(2d, {antialias: true, // 抗锯齿});canvasCover.width winW; // canvas宽度canvasCover.height winH; // canvas高度ctxCover.lineWidth 2; // 画线默认宽度ctxCover.strokeStyle red; // 设置颜色
};let startx ref(0), //起始坐标starty ref(0),pointerId ref(null);let points []; // 收集所有点的数据// pointerdown同时处理鼠标、触摸屏和触控笔。
const onPointerDown (e) {points [];isMove true;const { offsetX, offsetY } e;pointerId e.pointerId;startx.value offsetX;starty.value offsetY;canvas.addEventListener(pointermove, onDrawMove);canvas.addEventListener(pointerup, onDrawUp);
};/* 单个触摸事件 */
// 处理移动逻辑
const onDrawMove (e) {if (isMove) {const { offsetX, offsetY } e;if (pointerId ! e.pointerId) return;// 原始画线数据ctxCover.beginPath();ctxCover.lineWidth 2; // 设置线条粗细ctxCover.moveTo(startx.value, starty.value);ctxCover.lineTo(offsetX, offsetY);ctxCover.stroke();ctxCover.closePath();startx.value offsetX;starty.value offsetY;points.push({x: offsetX,y: offsetY,});e.preventDefault();}
}
// 处理释放逻辑
const onDrawUp (e) {ctx.closePath();// 鼠标释放时处理线条将处理过的数据显示之前的数据清空drawSmoothLine();points [];isMove false;document.removeEventListener(pointermove, onDrawMove);document.removeEventListener(pointerup, onDrawUp);
}
// 优化线条
const drawSmoothLine () {isMove false;if (points.length 1) {let num1 200; // 补点数let num2 20; // 从后面开始变细的点数const startWidth 2; // 设置线条粗细const endWidth 0; // 最后变细的宽度ctxCover.clearRect(0, 0, canvasCover.width, canvasCover.height); // 清除原始数据// 在释放的时候使用贝塞尔曲线重新处理画出来的线ctx.lineWidth startWidth;// 设置线条粗细// 使用赛贝尔曲线让线条更丝滑const bez new Bezier(points);const pointOnCurve bez.getLUT(num1); // 补点ctx.beginPath();ctx.moveTo(pointOnCurve[0].x, pointOnCurve[0].y);// 截取从开始截取到需要变细的位置正常画线pointOnCurve.slice(0, -num2).forEach((p) ctx.lineTo(p.x, p.y)); ctx.stroke();// 笔锋设置线从哪个位置开始按一定比例变细pointOnCurve.slice(-num2).forEach((p, px) {const lineWidth startWidth ((endWidth - startWidth) * px) / num2;ctx.lineWidth lineWidth;ctx.lineTo(p.x, p.y);ctx.stroke();});ctx.lineWidth startWidth;ctx.closePath();}
};const toSave () {// html2canvas截取工具第一个参数是截取的元素这里使用的ref第二个参数是相应的配置html2canvas(html_container.value, {background: transparent,useCORS: true}).then((canvas) {const base64 canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, );// console.log(data:image/png;base64,${base64});// 可选自动下载图片const link document.createElement(a);link.download bezier-curve.png;link.href data:image/png;base64,${base64};link.click();});
}
onMounted(() {initCanvas();
});
/scriptstyle scoped langscss
.CanvasPage {width: 100%;height: 100%;background-color: #044444;position: relative;.CanvasPageSave {position: absolute;left: 0;top: 0;}
}
/style
