菜单

js使用html2canvas达成显示器截取的亲自过问代码

2019年6月8日 - Ajax

整理文书档案,搜刮出三个js使用html二canvas完毕荧屏截取的言传身教代码,稍微整理精简一下做下分享。

html五行使canvas达成弹幕功效示例,html伍canvas

近日在初阶开垦弹幕摄像网址,通过html5中的canvas完结了弹幕的成效。

那么闲言碎语不要讲,先说思路后上代码。

思路:从页面布局上的话正是将一块画布覆盖在了video标签发生的摄像窗口之上,使用相对化定位就会完成了。最入眼的正是js调整画布上弹幕的显得了,每2个弹幕都打包成二个对象,对象涵盖的属性有弹幕应该出现的时刻,弹幕的颜色,弹幕是不是是移动的以及弹幕的文件。弹幕对象具有方法包涵:设置弹幕的横纵坐标,弹幕的活动函数。达成的法则,在监听录像起头播报的轩然大波,在摄像初阶播报时生成3个电磁打点计时器,机械漏刻每隔二个年华去遍历循环弹幕对象数组并依赖指标的性质在画布的适当地方上制图出弹幕,反应计时器中除了绘制弹幕的代码还会有实践更新弹幕数组的代码。

下图是弹幕效果截屏

图片 1

那正是说下边初步一贯上代码:

(function () {
    window.onload=function () {
        var video = document.getElementsByTagName("video")[0]
        var cav = document.getElementsByTagName("canvas")[0]
        //设置常量canvas的高度以及宽度
        var cavWidth = 800 
        var cavHeight = 420
        cav.width=cavWidth
        cav.height=cavHeight 
        var ctx = cav.getContext("2d")
        //存储弹幕对象的数组
        var capObjs = []
        var lastItemTime
        var capHeight = 20 
        var inputEle = document.getElementsByClassName("caption-input-text")[0]
        var sendEle = document.getElementsByClassName("caption-sendButton")[0]
        var colorUl = document.getElementsByClassName("colorItems")[0]
        var ismoveInputEle = document.getElementsByClassName("caption-input-ismove")[0]
        //弹幕颜色
        var colors=["#fff","#FFCCCC","#CCFFCC","#CCCCFF","#FFFFCC","#CCFFFF"]
        var selectedColorIndex = 0
        var prevPlayTime = 0
        //测试数据的数组
        var testArrayCopy = []
        var capobjId = 0
        //弹幕在画布中高度可能值组成的数组
        var topObjs = [{blank:true , value : 20 ,index:0},
                        {blank:true , value : 50 ,index:1},
                        {blank:true , value : 80 ,index:2},
                        {blank:true , value : 110 ,index:3},
                        {blank:true , value : 140 ,index:4},
                        {blank:true , value : 170 ,index:5},
                        {blank:true , value : 200 ,index:6},
                        {blank:true , value : 230 ,index:7},
                        {blank:true , value : 260 ,index:8},
                        {blank:true , value : 290 ,index:9},
                        {blank:true , value : 320 ,index:10},
                        {blank:true , value : 350 ,index:11},
                        {blank:true , value : 380 ,index:12},
                        {blank:true , value : 410 ,index:13}]
//test data 测试数据
var testArray = [{content:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",time:"1",ismove:false,colorIndex:0},
{content:"233333333333333",time:"2",ismove:true,colorIndex:0},
{content:"干杯,哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:5},
{content:"干杯,哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:4},
{content:"干杯,哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:4},
{content:"干杯,哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:0},
{content:"干杯,哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"4",ismove:false,colorIndex:0},
{content:"233333333333333",time:"5",ismove:true,colorIndex:4},
{content:"233333333333333",time:"6",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"8",ismove:true,colorIndex:0},
{content:"233333333333333",time:"9",ismove:true,colorIndex:0},
{content:"233333333333333",time:"10",ismove:true,colorIndex:0},
{content:"老师说的非常好,我要好好学习了》》》》",time:"12",ismove:true,colorIndex:0},
{content:"老师说的非常好,我要好好学习了》》》》",time:"13",ismove:true,colorIndex:0},
{content:"老师说的非常好,我要好好学习了》》》》",time:"14",ismove:true,colorIndex:2},
{content:"老师说的非常好,我要好好学习了》》》》",time:"15",ismove:false,colorIndex:0},
{content:"老师说的非常好,我要好好学习了》》》》",time:"16",ismove:true,colorIndex:2},
{content:"老师说的非常好,我要好好学习了》》》》",time:"17",ismove:true,colorIndex:3},
{content:"老师说的非常好,我要好好学习了》》》》",time:"18",ismove:true,colorIndex:2},
{content:"老师说的非常好,我要好好学习了》》》》",time:"19",ismove:true,colorIndex:0},
{content:"老师说的非常好,我要好好学习了》》》》",time:"20",ismove:true,colorIndex:3},
{content:"老师说的非常好,我要好好学习了》》》》",time:"21",ismove:true,colorIndex:0},
{content:"老师说的非常好,我要好好学习了》》》》",time:"22",ismove:true,colorIndex:0},
{content:"老铁们,小礼物走一波了,小汽车小火箭刷起来吧=========",time:"23",ismove:true,colorIndex:0},
{content:"老铁们,小礼物走一波了,小汽车小火箭刷起来吧=========",time:"24",ismove:true,colorIndex:0},
{content:"老铁们,小礼物走一波了,小汽车小火箭刷起来吧=========",time:"25",ismove:true,colorIndex:3},
{content:"老铁们,小礼物走一波了,小汽车小火箭刷起来吧=========",time:"26",ismove:true,colorIndex:0},
{content:"老铁们,小礼物走一波了,小汽车小火箭刷起来吧=========",time:"27",ismove:true,colorIndex:5},
{content:"老铁们,小礼物走一波了,小汽车小火箭刷起来吧=========",time:"28",ismove:false,colorIndex:5},
{content:"老铁们,小礼物走一波了,小汽车小火箭刷起来吧=========",time:"29",ismove:true,colorIndex:5},
{content:"老铁们,小礼物走一波了,小汽车小火箭刷起来吧=========",time:"30",ismove:true,colorIndex:5},
{content:"马上就下课了,瓦罗蓝大陆走起了~~~",time:"31",ismove:true,colorIndex:5},
{content:"马上就下课了,瓦罗蓝大陆走起了~~~",time:"32",ismove:true,colorIndex:2},
{content:"马上就下课了,瓦罗蓝大陆走起了~~~",time:"33",ismove:true,colorIndex:2},
{content:"马上就下课了,瓦罗蓝大陆走起了~~~",time:"33",ismove:true,colorIndex:5},
{content:"马上就下课了,瓦罗蓝大陆走起了~~~",time:"34",ismove:true,colorIndex:5},
{content:"马上就下课了,瓦罗蓝大陆走起了~~~",time:"35",ismove:true,colorIndex:5},
{content:"马上就下课了,瓦罗蓝大陆走起了~~~",time:"36",ismove:true,colorIndex:2},
{content:"马上就下课了,瓦罗蓝大陆走起了~~~",time:"37",ismove:true,colorIndex:2}]
        //将测试数据备份
        copyArray(testArray , testArrayCopy)
        /*弹幕对象的构造函数,参数分别是:1.ismove:弹幕是否是移动的弹幕,2.spe:弹幕的移动速度,3.col:弹幕的颜色,4.text:弹幕的文本*/
        /*原型链方法 setTopValue设置纵坐标,setLeftValue设置横坐标,moving完成坐标的改变,setId完成id值的设置*/
        function Caption( ismove , spe , col , text ) {
            this.isMove = ismove
            this.speed = spe
            this.color = col || "#ff0"
            this.content = text
            this.latestTime = 0 
            this.width = text.length * 20 
            this.id = 0
            this.topIndex = 0
            this.occupyPos = true 
            this.top = 300
            this.left = 0
            this.setLeftValue()
            this.setTopValue()
        }
        Caption.prototype.setTopValue = function  () {
            for(var i = 0 ,len = topObjs.length ; i < len ; i++){
                if (topObjs[i].blank) {
                    this.top = topObjs[i].value
                    this.topIndex = i
                    topObjs[i].blank = false 
                    break
                }
            }
        }
        Caption.prototype.setLeftValue = function  () {
            if (this.isMove) {
                this.left = cavWidth
            }
            else {
                var contentLength = this.content.length
                var nowItemLeft = 420 - contentLength * 9
                this.left = nowItemLeft
            }
        }
        Caption.prototype.moving = function () {
            if (this.isMove) {
                this.left-=this.speed
                if ( this.left + this.width < cavWidth && this.occupyPos) {
                    this.occupyPos = false 
                    topObjs[this.topIndex].blank = true 
                }
            } 
            else{
                this.latestTime += 1
                if (this.latestTime > 450) {
                    topObjs[this.topIndex].blank = true 
                }
            }
        }
        Caption.prototype.setId = function  () {
            this.id = capobjId
            capobjId++
        }

        var cap1 = new Caption(  false , 1 , 0 , "小礼物走一波,双击6666。。。。")
        capObjs.push(cap1)
        cap1.setId()

        //循环遍历数组,根据对象的属性绘制在画布上
        function drawAllText () {
            ctx.clearRect( 0 , 0 , cavWidth , cavHeight)
            ctx.beginPath()
            for(var i=0 , len = capObjs . length ; i < len ; i++ ){
                ctx.fillStyle = capObjs[i].color
                ctx.font = "bold 20px Courier New"
                ctx.fillText( capObjs[i].content , capObjs[i].left , capObjs[i].top )
                ctx.closePath()
                capObjs[i].moving()
                // if (capObjs[i].left < - cavWidth ) {
                    // capObjs.splice (i ,1)
                    // if excute this statement , will has fault because some item in array is null
                    // solution is : write a new function to refresh the array   
                // }
            }
        }

        //更新数组,当对象已经超出范围的时候从数组删除这个对象
        function refreshObjs(objs) {
            for (var i = objs.length - 1; i >= 0; i--) {
                if (objs[i].left < - cavWidth || objs[i].latestTime > 450 ) {
                    objs.splice(i , 1)
                }

            }
        }

        //更新保存弹幕对象的数组
        function updateArray () {
            var now = parseInt( video.currentTime )
            for (var i = testArray.length - 1; i >= 0; i--) {
                var nowItemTime = parseInt(testArray[i].time) 
                if ( nowItemTime == now ) {
                    //首次写的控制高度的方式,空间利用不充分,后来改为setTopValue中的方式
                    // var nowItemLeft = getLeftValue(testArray[i])
                    // var diffTime = Math.abs(nowItemTime - lastItemTime)
                    // if (diffTime < 6) { 
                    //     capHeight += 30
                    //     capHeight = capHeight > 400 ? 20 : capHeight
                    // }    
                    var temcolor = colors[testArray[i].colorIndex]
                    var temcap = new Caption (  testArray[i].ismove , 1 , temcolor , testArray[i].content  )
                    capObjs.push(temcap)
                    capObjs[capObjs.length - 1].setId()
                    temcap = null
                    testArray.splice(i,1)
                }
            }
        }

        //当用户点击send发送弹幕的回调函数
        function sendCaption (argument) {
            var inputEleTxt = inputEle.value
            var now = parseInt( video.currentTime )
            var inputIsmoveValue = ismoveInputEle.checked
            var temObj = {content:inputEleTxt,time:now,ismove:inputIsmoveValue,colorIndex:selectedColorIndex}
            testArray.push(temObj)
            inputEle.value = ""
        }

        // function getLeftValue (obj) {
        //     if (obj.ismove) {
        //         return 0
        //     }
        //     else {
        //         var contentLength = obj.content.length
        //         var nowItemLeft = 420 - contentLength * 9
        //         return nowItemLeft
        //     }
        // }

        //重新启动canvas,用在人为导致进度条时间的改变
        function reinitCav (argument) {
            // testArray = testArrayCopy
            copyArray(testArrayCopy , testArray)
            capObjs = []
            capHeight = 0
            clearInterval(canvasTimer)
            canvasTimer = null
            initCanvas()
        }

        var canvasTimer = null 

        //初始化canvas,用在开始播放时
         function initCanvas () {
             if (canvasTimer == null ) {
                canvasTimer = setInterval(function (argument) {
                    drawAllText()
                    updateArray()
                    refreshObjs(capObjs)
                },10)
             }

        }//end function initCanvas

        //复制数组
        function copyArray (arr1 , arr2) {
            for (var i =0 , len=arr1.length ; i < len ; i++) {
                    arr2[i] = arr1[i]
                }    
        }

        //color select event 用户发送弹幕的颜色控制代码
        colorUl.addEventListener("click", function( e ){
            var prevSelectItemId = ""
            switch (selectedColorIndex) {
                case 0:
                    prevSelectItemId = "colorItemFrist"
                    break;
                case 1:
                    prevSelectItemId = "colorItemSecond"
                    break;
                case 2:
                    prevSelectItemId = "colorItemThrid"
                    break;
                case 3:
                    prevSelectItemId = "colorItemFourth"
                    break;
                case 4:
                    prevSelectItemId = "colorItemFifth" 
                    break;
                case 5:
                    prevSelectItemId = "colorItemSixth"
                    break;
                default:
                    // statements_def
                    break;
            }
            var prevSelectItem = document.getElementById(prevSelectItemId)
            prevSelectItem.className = ""
            var eventTarget = e.target
            eventTarget.className = "selectedColor"
            var eveTarId = eventTarget.id.substring(9)
            switch (eveTarId) {
                case "Frist":
                    selectedColorIndex = 0
                    break;
                case "Second":
                    selectedColorIndex = 1
                    break;
                case "Thrid":
                    selectedColorIndex = 2
                    break;
                case "Fourth":
                    selectedColorIndex = 3
                    break;
                case "Fifth":
                    selectedColorIndex = 4
                    break;
                case "Sixth":
                    selectedColorIndex = 5
                    break;
                default:
                    // statements_def
                    break;
            }
        }, false)

        video.addEventListener("playing" , function () {
            initCanvas()
        })

        //进度条改变执行代码
        video.addEventListener("timeupdate", function  () {
            var nowPlayTime = video.currentTime
            var diffTime = Math.abs(nowPlayTime - prevPlayTime)
            prevPlayTime = nowPlayTime
            if (diffTime > 1) {
                reinitCav()
            }
        }, false)

        //视频暂停执行代码
        video.addEventListener("pause" , function () {
            clearInterval(canvasTimer)
            canvasTimer = null 
        })

        //点击send的监听事件
        sendEle.addEventListener("click" , sendCaption)

        //input的回车监听事件
        inputEle.addEventListener("keydown", function(e) {
            var keynum = 0
            keynum = window.event ? e.keyCode : e.which
            if (keynum == 13) {
                sendCaption()
            }
        })


        var aaaa = function() {
            alert(1)
        }
        aaaa()
        // function b(aaaa){
        //     return aaaa()
        // }
        // b()    
    }//end
})()

期待能够对想要制作弹幕的同室有所援助,仍可以去github下载完整的类型代码:gitbub项目地址

以上便是本文的全体内容,希望对我们的就学抱有帮忙,也冀望我们多多接济帮客之家。

http://www.bkjia.com/HTML5/1227071.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1227071.htmlTechArticlehtml5使用canvas实现弹幕功能示例,html5canvas
如今在发轫开垦弹幕录制网址,通过html5中的canvas达成了弹幕的效用。
那么闲言碎语不要讲,先…

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
<title>Test</title> 
<style type="text/css"> 
*{ 
  margin:0 auto; 
  padding:0; 
} 
.btn{ 
  width:100px; 
  height:30px; 
  line-height:30px; 
  background:green; 
  color:#fff; 
  border-radius:10px; 
  -webkit-border-radius:10px; 
  text-align:center; 
  display:block; 
  text-decoration:none; 
  } 
.container{ 
  background:#e5e5e5; 
} 
</style> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script> 
<script> 

$(function(){ 
  $("#btn").click(function(){ 
    html2canvas($("#container"), { 
      onrendered: function(canvas) { 
        //把截取到的图片替换到a标签的路径下载 
        $("#download").attr('href',canvas.toDataURL()); 
        //下载下来的图片名字 
        $("#download").attr('download','share.png') ;  
        document.body.appendChild(canvas); 
      } 
//可以带上宽高截取你所需要的部分内容 
//     , 
//     width: 300, 
//     height: 300 
    }); 
  }); 
}); 
</script> 
</head> 

<body> 
  <div style="padding:10px 0"> 
    <div class="btn" id="btn">截取屏幕</div> 
    <p style="color:red; text-align:center;">先点击截取屏幕后再点击截图下载</p> 
    <div style="margin-top:10px"> 
      <a href="javascript:;" rel="external nofollow" class="btn" id="download">截图下载</a> 
    </div> 
  </div> 
  <div class="container" id="container"> 
    <p style="text-align:center">以下是测试内容</p> 
    <img src="data:image/png;base64,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"> 
  </div> 
</body> 
</html> 

由于使用新型版本的html二canvas截取显示屏不通常,所以地方运用的是v0.4.壹版本举行测试。

注意事项:

1.页面加载完之后再调用html2canvas。

二.截取背景图片未有服从(就算把背景图片转为base6四也尚未效果)。

三.<img>标签的图样必要转为base6四,不然截取未有成效(英特网寻找了一下,好像都实属跨域难题)。

如上正是本文的全体内容,希望对我们的读书抱有援助,也希望大家多多协理脚本之家。

您或者感兴趣的作品:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图