h5 canvas 显示rgb
【摘要】
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>test</title> <script src="/static/js/jquery-2.1.1.min.js"></script...
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>test</title> <script src="/static/js/jquery-2.1.1.min.js"></script>
</head>
<body>
{#<img id="demo" src="/code">#}
<canvas id="divPic" width="1280" height="720" style="border:1px solid #ccc;display: block;"> 当前浏览器不支持canvas <!-- 如果浏览器支持canvas，则canvas标签里的内容不会显示出来 -->
</canvas>
<button id="switch" οnclick="sw()">启/停</button>
<script type="text/javascript">
{#var status=0;#}
{#var intervalid;#}
{#function initvideo(){#}
{# intervalid=setInterval(function(){#}
{# var time=new Date().getTime();#}
{# $('#demo').attr('src','/code?tome='+time);#}
{# }, 45);#}
//}
{#function sw(){#}
{# if(status==0){#}
{# status=1;#}
{# initvideo();#}
{# }else{#}
{# status=0;#}
{# clearInterval(intervalid);#}
{# }#}
//}
var imgObj = new Image();
$(function(){ var socket; var host = "ws://127.0.0.1:9999/"; socket = new WebSocket(host); {#socket.binaryType = "arraybuffer";#} try { socket.onopen = function (msg) { // $("btnConnect").disabled = true; //socket.send(encodeUtf8("rtsp_client\n")); {#socket.send("354354354");#} alert("socket conn!"); console.log('connected\n'); }; socket.onmessage = function (msg) { {#console.log(msg);#} var c = document.getElementById("divPic"); //创建image对象 var ctx=c.getContext("2d"); var imgData=ctx.createImageData(100,100); for (var i=0;i<imgData.data.length;i+=4) { imgData.data[i+0]=255; imgData.data[i+1]=i%255; imgData.data[i+2]=0; imgData.data[i+3]=255; } ctx.putImageData(imgData,10,10); var ctx=c.getContext("2d"); aaaa=window.URL.createObjectURL(msg.data); imgObj.src = aaaa; //待图片加载完后，将其显示在canvas上 imgObj.onload = function(){ var ctx = c.getContext('2d'); ctx.drawImage(this, 0, 0);//this即是imgObj,保持图片的原始大小：470*480 //ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768 } {#data=eval(msg)["data"];#} {#socre=eval(msg)["socre"];#} }; socket.onclose = function (msg) { {#alert("socket closed!");#} console.log('socket close') }; } catch (ex) { log(ex); }
});
</script>
</body>
</html>文章来源: blog.csdn.net，作者：网奇，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jacke121/article/details/88091614
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）