美文网首页
js视频转字符画

js视频转字符画

作者: 蓝不蓝编程 | 来源:发表于2020-12-02 09:38 被阅读0次

效果图

代码

如下内容另存为index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      overflow: hidden;
      /* font-size: 0; */
    }

    canvas,
    video {
      width: 30%;
      height: 30%;
    }
  </style>
</head>

<body>
  <input type="file" id="file" name="file" accept=".mp4,.flv">
</body>
<script src="https://cdn.bootcss.com/flv.js/1.3.3/flv.min.js"></script>
<script>
  let fontSize = 9
  let $file = document.getElementById('file')
  $file.onchange = function () {
    let file = $file.files.item(0)
    // let reader = new FileReader()
    // reader.readAsDataURL(file, 'UTF-8')
    // reader.onprogress = function (evt) {
    //   console.log(`${(evt.loaded / evt.total * 100).toFixed()}%`)
    // }
    // reader.onload = function (evt) {
      document.body.removeChild($file)
      // evt.target.result
      play(URL.createObjectURL(file), file.name.split('.').pop())
    // }
  }

  function play(url, type) {
    if (flvjs.isSupported()) {
      let videoElement = document.createElement('video')
      videoElement.loop = true
      let flvPlayer = flvjs.createPlayer({
        type: type,
        url: url
      })
      flvPlayer.attachMediaElement(videoElement)
      flvPlayer.load()
      flvPlayer.volume = 0.1
      flvPlayer.play()
      // document.body.appendChild(videoElement)

      flvPlayer.on('media_info', function (mediaInfo) {
        // 设置canvas
        let canvasElement = document.createElement('canvas')
        // 不明原因的卡
        // canvasElement.onmousewheel = () => { }
        let fps = mediaInfo.fps
        let canvasWidth = mediaInfo.width
        let canvasHeight = mediaInfo.height
        let textInfo
        let chars = "MMWNKEGD0OLkxdolc;:,'... "
        let fontWidth

        canvasElement.width = canvasWidth
        canvasElement.height = canvasHeight
        ctx = canvasElement.getContext('2d')
        ctx.font = `${fontSize}px courier new`
        ctx.fillStyle = 'black'
        ctx.textBaseline = 'middle'
        fontWidth = ctx.measureText('A').width
        textInfo = {
          col: ~~Math.ceil(canvasWidth / fontWidth),
          row: canvasHeight / fontSize
        }

        document.body.appendChild(canvasElement)

        draw()

        function draw() {
          ctx.clearRect(0, 0, canvasWidth, canvasHeight)
          ctx.drawImage(videoElement, 0, 0, textInfo.col, textInfo.row)
          let strings = getStringData(ctx, textInfo.col, textInfo.row)
          ctx.clearRect(0, 0, textInfo.col, textInfo.row)
          for (let i = 0, len = strings.length; i < len; i++) {
            ctx.fillText(strings[i], 0, fontSize * (i + 0.5), canvasWidth, fontSize)
          }
          requestAnimationFrame(draw)
        }

        function getStringData(ctx, width, height) {
          let length = textInfo.row * textInfo.col
          let strings = []
          // 获取一个 fontSize * fontSize 色块的颜色
          let imageData = ctx.getImageData(0, 0, width, height)
          for (let i = 0; i < length * 4; i += 4) {
            let myRed = imageData.data[i]
            let myGreen = imageData.data[i + 1]
            let myBlue = imageData.data[i + 2]
            let myGray = parseInt((myRed + myGreen + myBlue) / 3)
            let char = chars[~~(myGray / 255 * chars.length)]
            let index = ~~(i / 4 / width)
            if (strings[index]) {
              strings[index].push(char)
            } else {
              strings[index] = []
              strings[index].push(char)
            }
          }
          return strings
        }
      })
    }
  }

</script>

</html>

相关文章

  • js视频转字符画

    效果图 代码 如下内容另存为index.html

  • 视频转字符画

    / 01 / 视频转图片 在Pycharm上直接安装cv2库是成功不了的,具体什么原因我也不清楚。 经过我的实践,...

  • Android视频快速取帧图片

    上一篇文章我们讲到图片转字符画,这篇文章要实现视频转字符画视频。我们看一下实现出来的效果图: 实现的效果还是让人挺...

  • 一个简单的图片转字符画程序(C++实现)

    最近刷抖音的时候发现一些图片转字符画的视频(如下图这样的) (网上也有在线工具,百度搜索图片转字符画可以搜索到) ...

  • 数组检测

    检测是否是数组: 数组转字符串: 字符串转换数组: js对象转换成js字符串: js字符串转换成js对象:

  • js中的几点常用知识

    1.js中的字符串反转输出 js中的字符串反转输出的N种方法: 2.js中数组转字符串和字符串转数组 javasc...

  • FastJson 的使用

    需要包: 1、 Json字符串转 map 对象 输出: 2、Json字符串转 List 集合 输出: 3、复杂JS...

  • 字符串转二进制

    JS字符串与二进制的相互转化12345 //字符串转ascii码,用charCodeAt(); //ascii码转...

  • fastjson使用

    1.版本使用1.2.7以上的。 2.对象转字符串:JSON.toJSONString()。 3.字符串转对象:JS...

  • python项目实战:最简单的图片转字符画

    前言 今天为大家一个基础的,且简单的Python图片转字符画的过程,python图像转字符画需要用到matplot...

网友评论

      本文标题:js视频转字符画

      本文链接:https://www.haomeiwen.com/subject/dxeewktx.html