zoukankan      html  css  js  c++  java
  • js中从blob提取二进制

    文章结构:

    一、所遇到的问题

    二、解决方法

    一、

        服务器端通过websocket向浏览器端传输图片(二进制),需要根据不同的图片把图片显示在不同的位置,可行的一个方法是先把图片转化成二进制数组,再把二进制数组和一个字节的图片标识拼接在一块传输给浏览器端,最后在浏览器端拆分。找了好久才找到一些js处理二进制的相关方法,就在此记录一下。

    二、

        1、服务器端二进制拼接:

    public byte[] mergeByte(byte[] b1,byte[] b2) {
                    byte[] b3=new byte[b1.length+b2.length];
                    System.arraycopy(b1,0,b3,0,b1.length);
                    System.arraycopy(b2,0,b3,b1.length,b2.length);
                    return b3;
                }

       2、浏览器端二进制拆分

    主要利用js中的Blob和FileReader,有关这两个类的知识,可以查看

    http://www.iunbug.com/archives/2012/06/06/273.html

    https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

    ws.onmessage = function(event){
             if (event.data instanceof Blob) {
                var blob = event.data;
                //先把blob进行拆分,第一个字节是标识
                var newblob=blob.slice(0,1);
    //js中的blob没有没有直接读出其数据的方法,通过FileReader来读取相关数据
    var reader = new FileReader(); reader.readAsBinaryString(newblob); var imgFlag;
    // 当读取操作成功完成时调用. reader.onload
    = function(evt){ if(evt.target.readyState == FileReader.DONE){ var imgFlag = evt.target.result; if(imgFlag=='@'){ img=document.getElementById('er'); }else if(imgFlag=='A'){ img=document.getElementById('photo'); }else{ img=document.getElementById('photo'); } newblob=blob.slice(1,blob.size); window.URL = window.URL || window.webkitURL; var source = window.URL.createObjectURL(newblob); img.src=source; } } }
  • 相关阅读:
    为什么要把js代码写到<!--//-->中
    js逻辑与,或,非
    你不知道的JavaScript——第二章:this全面解析
    你不知道的JavaScript——this词法
    如何避免用户多次点击造成的多次请求
    通用模块设计UMD
    你不知道的JavaScript——第一章:作用域是什么?
    github 操作
    数组中元素累加 reduce
    流星雨
  • 原文地址:https://www.cnblogs.com/redlight/p/3905326.html
Copyright © 2011-2022 走看看