前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)

简介: 前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)

image.png

  • GitHub 地址
  • 支持 视频图片 上涂鸦,做标记
  • 画板功能支持 矩形、圆形、椭圆、箭头、直线、文本,支持 缩放、修改、调整字号颜色、移动位置....,画板数据支持上传保存,后续传入重新复原。
  • 画板可配置属性
// 配置对象,配置对象支持为每个笔画类型进行单独配置,只需要在切换时修改即可
this.option = {
  // 当前画笔类型
  // ['rect(矩形)', 'line(直线)', 'circle(圆形)' 'ellipse(椭圆)', 'text(文本)', 'brush(画笔)',  'arrow(箭头)']
  strokeType: option.strokeType,
  // 画笔颜色
  strokeColor: option.strokeColor || '#F13E48',
  // 画笔宽度
  strokeWidth: option.strokeWidth || 1,
  // 文本字号
  fontSize: option.fontSize || 14,
  // 字体名称
  fontFamily: option.fontFamily || 'monospace',
  // 文本粗细
  fontWeight: option.fontWeight || 400,
  // 渲染文字行间距(行高 + lineSpace)
  fontLineSpace: option.lineSpace || 5,
  // 最大高度(画板的最大高度尺寸)
  // 有画板的最大高度尺寸 'text(文本)' 才会支持缩放,否则不会进行缩放,比例按 1 处理,其他笔画类型不受影响。
  maxHeight: option.maxHeight || 0,
  // 是否可以编辑
  isEdit: option.isEdit || true,
  // 是否填充颜色(箭头类型)
  isFill: option.isFill || true,
  // 显示编辑矩形框(目前支持:'text(文本)' 其他画笔类型不需要支持)
  isShowEditRect: option.isShowEditRect || true,
  // 是否支持窗口缩放 重新调整元素坐标
  isResize: option.isResize || true,
  // 是否允许鼠标在编辑或绘制过程中离开画板区域,离开则算停止本次手势,默认不允许
  isAllowLeaveEditArea: option.isAllowLeaveEditArea || false,
  // 文本框贴贴文本内容排版优化(false:原格式,true:优化格式,去除多余的空格)
  isPasteTypesetting: option.isPasteTypesetting || true,
  // 有输入框时,是否在失去焦点的时候进行移除,默认(false)是再次点击画板才会移除
  isInputBlurRemove: option.isInputBlurRemove || false,
  // 输入框边框提示文字
  inputPlaceholder: (typeof option.inputPlaceholder === 'string') ? option.inputPlaceholder : '请输入文字',
  // 输入框在输入过程中文字后面预留宽度,以防输入时字符超过出现换行
  inputOffsetW: option.inputOffsetW || 4,
  // 输入框边框大小('text(文本)'进入编辑状态后,操作矩形边框宽度)
  inputBoderWidth: option.inputBoderWidth || 1,
  // 输入框边框上线左右离文字的间距('text(文本)'进入编辑状态后,操作矩形边框内间距)
  inputPadding: option.inputPadding || 5,
  // 输入框边框圆角
  inputBorderRadius: option.inputBorderRadius || 0,
  // 输入框边框样式
  inputBorderStyle: option.inputBorderStyle || 'solid',
  // 进入编辑状态后,操作圆圈边框宽度
  editBoderWidth: option.inputBoderWidth || 1,
  // 进入编辑状态后,操作圆圈的半径
  editRadius: option.editRadius || 4,
  // 进入编辑状态后,操作圆圈的内部圆心填充颜色
  editFillColor: option.editFillColor || '#fff',
  // 创建时鼠标移动多少距离才算正式画笔画,以免点击之后误操作
  effectiveOffset: option.effectiveOffset ||  { x: 2, y: 2 },
  // 新建元素鼠标样式(画板默认鼠标样式)
  editNewCursor: 'crosshair',
  // 移动元素鼠标样式
  editMoveCursor: 'grab'
}
相关文章
|
2天前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
53 25
|
21天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
3月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
253 68
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
53 6
|
2月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
53 1
利用html2canvas插件自定义生成名片信息并保存图片
|
3月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
3月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
75 4
|
3月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
37 1
|
3月前
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
107 3
|
移动开发 HTML5