input框长文本canvas生成图片文字不换行_html2canvas生成的图片长文字不折行-CSDN博客

开发中遇到一个问题, 管理后台的一个页面需要在提交时生成图片给领导审核, 但是在页面中有一个备注栏使用的input, 有时候会遇到超长文本备注,在生成图片之后, 备注栏的文字无法换行, 导致无法完整看到备注的文本内容, 这是canvas库本身对于css的支持不够导致的, 因此想到了使用div模拟input输入框来解决这个问题

1.模版中的HTML代码

<div class="input-like" :contenteditable="true" @input="changeRemarks">
     {{ remarks }}
</div>

2.JS代码-这里直接把div模拟的input输入框的change事件放上来, 这个方法的操作就是为了解决文本双向绑定以及鼠标的光标能够跟随文本, canvas生成的图片的方法我就不放了, 这个方法可以直接拿去用

// 使用div代替input输入框事件,解决cavans生成图片文本无法自动换行的问题
// 使用debounce防抖函数是为了解决避免在用户快速输入时重复触发更新导致文本重复的问题
changeRemarks: debounce(function(event) {
// 事件触发后,更新操文本值操作会重置<div>的选区，导致光标位置被重置到<div>的起始位置，所以需要保存当前光标位置
  const selection = window.getSelection()
  const range = selection.getRangeAt(0).cloneRange()
  // 保存当前光标位置
  const cursorPosition = range.startOffset
  // 更新数据
  this.remarks  = event.target.innerText
  // 使用Vue.nextTick确保DOM更新后恢复光标位置
  this.$nextTick(() => {
     range.collapse(false)
     selection.removeAllRanges()
     selection.addRange(range)
     // 恢复光标位置
     range.setStart(range.startContainer, cursorPosition)
     range.setEnd(range.endContainer, cursorPosition)
     selection.removeAllRanges()
     selection.addRange(range)
  })
}, 1000),

3.CSS-div模拟input输入框的效果

.input-like {
  border: 1px solid #DCDFE6;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: all 0.3s ease;
  border-radius: 5px;
}

/* div模拟input响应式设计 */
@media screen and (max-width: 600px) {
  .input-like {
    font-size: 14px;
  }
}

更新不易, 点个赞呗~