首页 > 其他分享 >富文本编辑器的内容转换成图片

富文本编辑器的内容转换成图片

时间:2023-11-15 09:36:27浏览次数:41  
标签:转换成 文本编辑 dom image 滚动条 编辑器 图片

需求:pc端通过富文本编辑器,编辑商品详情页,然后生成图片,用于移动端展示之用。

用到的库:wangEditor5和Dom-to-image(后者没找到官网,使用方法可自行百度,相关博客还是比较多的)

常规科普:

  1.wangEditor 编辑器绑定的valueHtml即为字符串形式的dom结构。我们解码后可直接预览效果;

  2.利用dom-to-image库实现dom到图片的转化,顾名思义。(本来选的是HTML2cancas 库,但是截图白边问题,图片无法自适应问题,缩放无法使用等等,

   快把人搞崩溃了,所以换了dom-to-image这个库,当然也有坑,后面再说。。)

 

我自己写了一个demo。放在我的码云里了,需要的小伙伴请自行下载,如果对你有帮助,欢迎star,fork或评论。

地址:https://gitee.com/okwufeng/rich-text-editor.git

ps: dom-to-image目前发现的坑就是点击生成图片后,原有编辑器的区域滚动条消失了,导致想修改的话没法滚动,

个人理解这个原因:正常情况下,截图无法截取到滚动条可见区域以外的部分,为了截取全部,就取消了滚动条,并且溢出隐藏了,所以出现这种情况。

不过不要慌,代码里面我已经做了相应处理,就是生成之前给个提示 “ 点击生成图片后,编辑器将置空,是否确认? ”,感觉这样子交互就友好多了!

好了,先写这么多,有问题可以评论交流。

标签:转换成,文本编辑,dom,image,滚动条,编辑器,图片
From: https://www.cnblogs.com/fxwoniu/p/17833123.html

相关文章

  • 数据库 常用,字符串类型 数据转换成date 类型数据
      数据库中 时间是用:VARCHAR2  字符串类型数据:20231226  来显示 '20231226'char字符串转换成date类型时间selectto_date(字段名,'yyyy-MM-dd')fromxx转换后,显示成:'2023-12-2600:00:00.000'  ......
  • SDL2加载一个图片
    一、概述使用SDL2+SDL2_Image显示一张图片操作步骤:SDL2的操作流程:1.初始化SDLSDL_Init2.创建SDL_WindowSDL_CreateWindow3.创建渲染器SDL_RendererSDL_CreateRenderer4.生成一个SDL_Surface,这个Surfac......
  • Vue3实现图片滚轮缩放和拖拽
    在项目开发中遇到一个需求:1:用鼠标滚轮可对图片进行缩放处理2:点击按钮可对图片进行缩放处理3:可对图片进行拖拽处理 我在开发中通过自己实现与百度查看优秀的铁子进行了两种类型的使用  <template><divref="imgWrap"class="wrap"@mousewheel.prevent="rollImg"......
  • python读取图片读不出来
    乐,代码没问题,还是不停的提示图片不存在或者图片失效于是乎,检查python默认工作目录:pythonimportosprint(os.getcwd())运行得知是用户名主目录然后把图片放到该目录就行了一想到这种问题就乐 importos print(os.getcwd()) importos print......
  • :key可以不加,如果不加:key属性,刷新页面时,可能由于key相同,图片不刷新。
    件中使用vue-lazyload时,v-lazy代替v-bind:src实现图片懒加载可以使用key属性不是必须的,但是不写key可能报警告,有些内容可能显示异常。key的作用:提高性能,不影响显示效果(如果没有id,可以使用index代替)......
  • HTML和webAPI之根据时间和事件来变实现图片的转换
    一:概述在一些前端的设计场景中,我们会发现有很多的场景需要根据时间然后去变换图片。在不同时间都会出现不同的图片。下面来写一个案例,来更换图片,并显示当前的时间(xx年xx月xx日)。二:案例实现在这里需要用到的知识是事件的使用以及JavaScript内置对象(时间函数)的使用。以及时间的......
  • 银行支付凭证截图生成器在线,工商邮政农业招商建设,画板+透明标签+图片框
    用易语言设计了一个非常牛X的截图生成器,娱乐使用哈,软件我在这里也不会分享,模版网上找的,百度图库搜到的,上面的LOGO用的是一个在线生成器,然后标签用的黑月透明标签,加一个通用对话框读取图片文件夹到编辑框,自动写入到Logo图片框,参数输入框的编辑框对应着模版上指定信息的透明标签,单选......
  • 中国银行模拟器app,用java设计框架,图片网上找的,提供代码,仅供娱乐
    回执单生成器的Java程序需要涉及到一些基本的Java编程技能,包括创建类、处理用户输入和格式化输出。下面是一个简单的示例代码,用于生成一个简易的回执单。这个程序将接收用户的输入,然后生成一个格式化的回执单。请注意,这个示例是基础的,并没有实现完整的错误处理或复杂的用户界面。......
  • Rust写的爬虫代码抓取精美的图片
    Rust是一种系统级编程语言,它的设计目标是安全、并发和高效。Rust的爬虫库非常丰富,例如scraper、select、reqwest等等。这些库提供了许多功能,例如HTML解析、HTTP请求、异步处理等等,使得Rust成为一个非常适合编写爬虫的语言。以下是一个使用reqwest和scraper库编写的简单爬虫示例,用于......
  • fgui 怎么将"UI空间下的世界坐标"转换成"fgui空间下的世界坐标( global pos )" cocosc
    嗨~如果本文对你有帮助,点个推荐吧!这样能让文章在搜索中更靠前,帮助到更多有需要的人!首先通过坐标系转换一步步地进行计算我尝试过,但卡在了将屏幕坐标转换为fgui空间的全局坐标上。但发现了一个巧妙的做法。//随便的一个Cocoscreator的NodevaranyCCUINode=this._labe......