精华内容
下载资源
问答
  • 1 认识二进制数据 二进制是计算技术中广泛采用的一种数制。二进制数据是用0和1两个数码来表示的数。它的基数为2,进位规则是“逢二进一”,借位规则是“借一当二”,由18世纪德国数理哲学大师莱布尼兹发现。—— ...

    1 认识二进制数据

    二进制是计算技术中广泛采用的一种数制。二进制数据是用0和1两个数码来表示的数。它的基数为2,进位规则是“逢二进一”,借位规则是“借一当二”,由18世纪德国数理哲学大师莱布尼兹发现。

    —— 百度百科

    二进制数据就像上图一样,由0和1来存储数据。普通的十进制数转化成二进制数一般采用"除2取余,逆序排列"法,用2整除十进制整数,可以得到一个商和余数;再用2去除商,又会得到一个商和余数,如此进行,直到商为小于1时为止,然后把先得到的余数作为二进制数的低位有效位,后得到的余数作为二进制数的高位有效位,依次排列起来。例如,数字10转成二进制就是1010,那么数字10在计算机中就以1010的形式存储。

    而字母和一些符号则需要通过 ASCII 码来对应,例如,字母a对应的 ACSII 码是 97,二进制表示就是0110 0001。JavaScript 中可以使用 charCodeAt 方法获取字符对应的 ASCII:

    b69b4bd10cb6e46634f242d6a54dca0a.png

    除了ASCII外,还有一些其他的编码方式来映射不同字符,比如我们使用的汉字,通过 JavaScript 的 charCodeAt 方法得到的是其 UTF-16 的编码。

    a81f52d45a114d3270421c6c9ba3d40f.png

    Node 处理二进制数据

    JavaScript 在诞生初期主要用于表单信息的处理,所以 JavaScript 天生擅长对字符串进行处理,可以看到 String 的原型提供特别多便利的字符串操作方式。

    b0b17270f269bcb4df1f4b3ca59f14d9.png

    但是,在服务端如果只能操作字符是远远不够的,特别是网络和文件的一些 IO 操作上,还需要支持二进制数据流的操作,而 Node.js 的 Buffer 就是为了支持这些而存在的。好在 ES6 发布后,引入了类型数组(TypedArray)的概念,又逐步补充了二进制数据处理的能力,现在在 Node.js 中也可以直接使用,但是在 Node.js 中,还是 Buffer 更加适合二进制数据的处理,而且拥有更优的性能,当然 Buffer 也可以直接看做 TypedArray 中的 Uint8Array。除了 Buffer,Node.js 中还提供了 stream 接口,主要用于处理大文件的 IO 操作,相对于将文件分批分片进行处理。

    2 认识 Buffer

    Buffer 直译成中文是『缓冲区』的意思,顾名思义,在 Node.js 中实例化的 Buffer 也是专门用来存放二进制数据的缓冲区。一个 Buffer 可以理解成开辟的一块内存区域,Buffer 的大小就是开辟的内存区域的大小。下面来看看Buffer 的基本使用方法。

    API 简介

    早期的 Buffer 通过构造函数进行创建,通过不同的参数分配不同的 Buffer。

    new Buffer(size)

    创建大小为 size(number) 的 Buffer。

    new Buffer(5)// 

    new Buffer(array)

    使用八位字节数组 array 分配一个新的 Buffer。

    const buf = new Buffer([0x74, 0x65, 0x73, 0x74])// // 对应 ASCII 码,这几个16进制数分别对应 t e s t// 将 Buffer 实例转为字符串得到如下结果buf.toString() // 'test'

    new Buffer(buffer)

    拷贝 buffer 的数据到新建的 Buffer 实例。

    const buf1 = new Buffer('test')const buf2 = new Buffer(buf1)

    new Buffer(string[, encoding])

    创建内容为 string 的 Buffer,指定编码方式为 encoding。

    const buf = new Buffer('test')// // 可以看到结果与 new Buffer([0x74, 0x65, 0x73, 0x74]) 一致buf.toString() // 'test'

    更安全的 Buffer

    由于 Buffer 实例因第一个参数类型而执行不同的结果,如果开发者不对参数进行校验,很容易导致一些安全问题。例如,我要创建一个内容为字符串 "20" 的 Buffer,而错误的传入了数字 20,结果创建了一个长度为 20 的Buffer 实例。

    e3d1dfc9ef4c3ae28e0a974d6a0f6dec.png

    可以看到上图,Node.js 8 之前,为了高性能的考虑,Buffer 开辟的内存空间并未释放之前已存在的数据,直接将这个 Buffer 返回可能导致敏感信息的泄露。因此,Buffer 类在 Node.js 8 前后有一次大调整,不再推荐使用 Buffer 构造函数实例 Buffer,而是改用Buffer.from()、Buffer.alloc() 与 Buffer.allocUnsafe() 来替代 new Buffer()。

    Buffer.from()

    该方法用于替代 new Buffer(string)、new Buffer(array)、new Buffer(buffer)。

    Buffer.alloc(size[, fill[, encoding]])

    该方法用于替代 new Buffer(size),其创建的 Buffer 实例默认会使用 0 填充内存,也就是会将内存之前的数据全部覆盖掉,比之前的 new Buffer(size) 更加安全,因为要覆盖之前的内存空间,也意味着更低的性能。

    同时,size 参数如果不是一个数字,会抛出 TypeError。

    0f4f616f08eee9206421aafa293e2717.png

    Buffer.allocUnsafe(size)

    该方法与之前的 new Buffer(size) 保持一致,虽然该方法不安全,但是相比起 alloc 具有明显的性能优势。

    43aa486fc3db0dd0a1a69d48faa975ee.png

    Buffer 的编码

    前面介绍过二进制数据与字符对应需要指定编码,同理将字符串转化为 Buffer、Buffer 转化为字符串都是需要指定编码的。

    Node.js 目前支持的编码方式如下:

    • hex:将每个字节编码成两个十六进制的字符。

    • ascii:仅适用于 7 位 ASCII 数据。此编码速度很快,如果设置则会剥离高位。

    • utf8:多字节编码的 Unicode 字符。许多网页和其他文档格式都使用 UTF-8。

    • utf16le:2 或 4 个字节,小端序编码的 Unicode 字符。

    • ucs2:utf16le 的别名。

    • base64:Base64 编码。

    • latin1:一种将 Buffer 编码成单字节编码字符串的方法。

    • binary:latin1 的别名。

    比较常用的就是 UTF-8、UTF-16、ASCII,前面说过 JavaScript 的 charCodeAt 使用的是 UTF-16 编码方式,或者说 JavaScript 中的字符串都是通过 UTF-16 存储的,不过 Buffer 默认的编码是 UTF-8。

    49376e2abc04a74ef0cfe62a39629677.png

    可以看到一个汉字在 UTF-8 下需要占用 3 个字节,而 UTF-16 只需要 2 个字节。主要原因是 UTF-8 是一种可变长的字符编码,大部分字符使用 1 个字节表示更加节省空间,而某些超出一个字节的字符,则需要用到 2 个或 3 个字节表示,大部分汉字在 UTF-8 中都需要用到 3 个字节来表示。UTF-16 则全部使用 2 个字节来表示,对于一下超出了 2 字节的字符,需要用到 4 个字节表示。2 个字节表示的 UTF-16 编码与 Unicode 完全一致,通过汉字Unicode编码表可以找到大部分中文所对应的 Unicode 编码。前面提到的 『汉』,通过 Unicode 表示为 6C49。

    1d9d868f3a7c7b50cf4ab7cd5653efdf.png

    这里提到的 Unicode 编码又被称为统一码、万国码、单一码,它为每种语言都设定了统一且唯一的二进制编码,而上面说的 UTF-8、UTF-16 都是他的一种实现方式。更多关于编码的细节不再赘述,也不是本文的重点,如果想了解更多可自行搜索。

    乱码的原因

    我们经常会出现一些乱码的情况,就是因为在字符串与 Buffer 的转化过程中,使用了不同编码导致的。

    我们先新建一个文本文件,然后通过 utf16 编码保存,然后通过 Node.js 读取改文件。

    003113c07339d5b3d81af324be074276.png

    const fs = require('fs')const buffer = fs.readFileSync('./1.txt')console.log(buffer.toString())

    0e7483400b2c6ae15030423ec7134134.png

    由于 Buffer 在调用 toString 方法时,默认使用的是 utf8 编码,所以输出了乱码,这里我们将 toString 的编码方式改成 utf16 就可以正常输出了。

    const fs = require('fs')const buffer = fs.readFileSync('./1.txt')console.log(buffer.toString('utf16le'))

    4395c20989ef5e00ca8ddf86debcb1e6.png

    3 认识 Stream

    前面我们说过,在 Node.js 中可以利用 Buffer 来存放一段二进制数据,但是如果这个数据量非常的大使用 Buffer 就会消耗相当大的内存,这个时候就需要用到 Node.js 中的 Stream(流)。要理解流,就必须知道管道的概念。

    在类Unix操作系统(以及一些其他借用了这个设计的操作系统,如Windows)中,管道是一系列将标准输入输出链接起来的进程,其中每一个进程的输出被直接作为下一个进程的输入。这个概念是由道格拉斯·麦克罗伊为Unix 命令行发明的,因与物理上的管道相似而得名。

    -- 摘自维基百科

    我们经常在 Linux 命令行使用管道,将一个命令的结果传输给另一个命令,例如,用来搜索文件。

    ls | grep code

    这里使用 ls 列出当前目录的文件,然后交由 grep 查找包含 code 关键词的文件。

    在前端的构建工具 gulp 中也用到了管道的概念,因为使用了管道的方式来进行构建,大大简化了工作流,用户量一下子就超越了 grunt。

    // 使用 gulp 编译 scssconst gulp = require('gulp')const sass = require('gulp-sass')const csso = require('gulp-csso')gulp.task('sass', function () {  return gulp.src('./**/*.scss')    .pipe(sass()) // scss 转 css    .pipe(csso()) // 压缩 css    .pipe(gulp.dest('./css'))})

    前面说了这么多管道,那管道和流直接应该怎么联系呢。流可以理解为水流,水要流向哪里,就是由管道来决定的,如果没有管道,水也就不能形成水流了,所以流必须要依附管道。在 Node.js 中所有的 IO 操作都可以通过流来完成,因为 IO 操作的本质就是从一个地方流向另一个地方。例如,一次网络请求,就是将服务端的数据流向客户端。

    const fs = require('fs')const http = require('http')const server = http.createServer((request, response) => {    // 创建数据流    const stream = fs.createReadStream('./data.json')    // 将数据流通过管道传输给响应流    stream.pipe(response)})server.listen(8100)// data.json{ "name": "data" }

    d02d186fc74f0ab5e741ab5c7611bd82.png

    使用 Stream 会一边读取 data.json 一边将数据写入响应流,而不是像 Buffer 一样,先将整个 data.json 读取到内存,然后一次性输出到响应中,所以使用 Stream 的时候会更加节约内存。

    其实 Stream 在内部依然是运作在 Buffer 上。如果我们把一段二进制数据比做一桶水,那么通过 Buffer 进行文件传输就是直接将一桶水倒入到另一个桶里面,而使用 Stream,就是将桶里面的水通过管道一点点的抽取过去。

    Stream 与 Buffer 内存消耗对比

    这里如果只是口头说说可能感知不明显,现在分别通过 Stream 和 Buffer 来复制一个 2G 大小的文件,看看 node 进程的内存消耗。

    Stream 复制文件

    // Stream 复制文件const fs = require('fs');const file = './file.mp4';fs.createReadStream(file)  .pipe(fs.createWriteStream('./file.copy.mp4'))  .on('finish', () => {      console.log('file successfully copy');  })

    dc24f5b2b52bd1619e6f0735bae466bd.png

    Buffer 复制文件

    // Buffer 复制文件const fs = require('fs');const file = './file.mp4';// fs.readFile 直接输出的是文件 Bufferfs.readFile(file, (err, buffer) => {    fs.writeFile('./file.copy.mp4', buffer, (err) => {        console.log('file successfully copy');    });});

    ed3a37136d68605dd98fb206f40798bc.png

    通过上图的结果可以看出,通过 Stream 拷贝时,只占用了我电脑 0.6% 的内存,而使用 Buffer 时,占用了 15.3% 的内存。

    API 简介

    在 Node.js 中,Steam 一共被分为五种类型。

    可读流(Readable),可读取数据的流;

    可写流(Writable),可写入数据的流;

    双工流(Duplex),可读又可写的流;

    转化流(Transform),在读写过程中可任意修改和转换数据的流(也是可读写的流);

    所有的流都可以通过 .pipe 也就是管道(类似于 linux 中的 |)来进行数据的消费。另外,也可以通过事件来监听数据的流动。不管是文件的读写,还是 http 的请求、响应都会在内部自动创建 Stream,读取文件时,会创建一个可读流,输出文件时,会创建可写流。

    可读流(Readable)

    虽然叫做可读流,但是可读流也是可写的,只是这个写操作一般是在内部进行的,外部只需要读取就行了。

    可读流一般分为两种模式:

    流动模式:表示正在读取数据,一般通过事件监听来获取流中的数据。

    暂停模式:此时流中的数据不会被消耗,如果在暂停模式需要读取可读流的数据,需要显式调用stram.read()。

    可读流在创建时,默认为暂停模式,一旦调用了 .pipe,或者监听了 data 事件,就会自动切换到流动模式。

    const { Readable } = require('stream')// 创建可读流const readable = new Readable()// 绑定 data 事件,将模式变为流动模式readable.on('data', chunk => {  console.log('chunk:', chunk.toString()) // 输出 chunk})// 写入 5 个字母for (let i = 97; i < 102; i++) {  const str = String.fromCharCode(i);  readable.push(str)}// 推入 `null` 表示流已经结束readable.push(null)

    3e510387857e218e538829ea4c7daf2c.png

    const { Readable } = require('stream')// 创建可读流const readable = new Readable()// 写入 5 个字母for (let i = 97; i < 102; i++) {  const str = String.fromCharCode(i);  readable.push(str)}// 推入 `null` 表示流已经结束readable.push('\n')readable.push(null)// 通过管道将流的数据输出到控制台readable.pipe(process.stdout)

    56b0d66b33463986804f9be09f8fa6b0.png

    上面的代码都是手动创建可读流,然后通过 push 方法往流里面写数据的。前面说过,Node.js 中数据的写入都是内部实现的,下面通过读取文件的 fs 创建的可读流来举例:

    const fs = require('fs')// 创建 data.json 文件的可读流const read = fs.createReadStream('./data.json')// 监听 data 事件,此时变成流动模式read.on('data', json => {  console.log('json:', json.toString())})

    01b1f1d159bcd48087cc4960ae9ce03f.png

    可写流(Writable)

    可写流对比起可读流,它是真的只能写,属于只进不出的类型,类似于貔貅。

    创建可写流的时候,必须手动实现一个 _write() 方法,因为前面有下划线前缀表明这是内部方法,一般不由用户直接实现,所以该方法都是在 Node.js 内部定义,例如,文件可写流会在该方法中将传入的 Buffer 写入到指定文本中。

    写入如果结束,一般需要调用可写流的 .end() 方法,表示结束本次写入,此时还会调用 finish 事件。

    const { Writable } = require('stream')// 创建可写流const writable = new Writable()// 绑定 _write 方法,在控制台输出写入的数据writable._write = function (chunk) {  console.log(chunk.toString())}// 写入数据writable.write('abc')// 结束写入writable.end()_write 方法也可以在实例可写流的时候,通过传入对象的 write 属性来实现。const { Writable } = require('stream')// 创建可写流const writable = new Writable({  // 同,绑定 _write 方法    write(chunk) {    console.log(chunk.toString())  }})// 写入数据writable.write('abc')// 结束写入writable.end()

    69fe3b3398c63bfcca094c5193840e17.png

    下面看看 Node.js 中内部通过 fs 创建的可写流。

    const fs = require('fs')// 创建可写流const writable = fs.createWriteStream('./data.json')// 写入数据,与自己手动创建的可写流一致writable.write(`{  "name": "data"}`)// 结束写入writable.end()

    看到这里就能理解,Node.js 在 http 响应时,需要调用 .end() 方法来结束响应,其实内部就是一个可写流。现在再回看前面通过 Stream 来复制文件的代码就更加容易理解了。

    const fs = require('fs');const file = './file.mp4';fs.createReadStream(file)  .pipe(fs.createWriteStream('./file.copy.mp4'))  .on('finish', () => {      console.log('file successfully copy');  })

    双工流(Duplex)

    双工流同时实现了 Readable 和 Writable,具体用法可以参照可读流和可写流,这里就不占用文章篇幅了。

    管道串联

    前面介绍了通过管道(.pipe())可以将一个桶里的数据转移到另一个桶里,但是有多个桶的时候,我们就需要多次调用 .pipe()。例如,我们有一个文件,需要经过 gzip 压缩后重新输出。

    const fs = require('fs')const zlib = require('zlib')const gzip = zlib.createGzip() // gzip 为一个双工流,可读可写const input = fs.createReadStream('./data.json')const output = fs.createWriteStream('./data.json.gz')input.pipe(gzip) // 文件压缩gzip.pipe(output) // 压缩后输出

    面对这种情况,Node.js 提供了 pipeline() api,可以一次性完成多个管道操作,而且还支持错误处理。

    const { pipeline } = require('stream')const fs = require('fs')const zlib = require('zlib')const gzip = zlib.createGzip()const input = fs.createReadStream('./data.json')const output = fs.createWriteStream('./data.json.gz')pipeline(  input,   // 输入  gzip,    // 压缩  output,  // 输出  // 最后一个参数为回调函数,用于错误捕获  (err) => {    if (err) {      console.error('压缩失败', err)    } else {      console.log('压缩成功')    }  })

    4 参考

    字符编码笔记

    Buffer | Node.js API

    stream | Node.js API

    stream-handbook

    43ad47aced688f3ddfd3149efd8b736b.png

    关注我们

    85566ce64ba7c190cbf17a14334ccfca.png 4f372fb3e069a12b2ccb4dc12b97c67a.png

    公众号ID:前端Sharing

    冰淇淋里有夏天的味道

    展开全文
  • 扫描仪工作完成后,调取一个接口,从本地的扫描结果中返回图片的base64。 然后,页面上再将base64一个个的传输到后台,获取服务器返回的url之后在系统中使用。 测试的时候,非常完美,但是实际使用的时候,却产生...
    工作中和一个扫描仪厂家对接,厂家写了一个插件。
    可以在客户的电脑上开启一个http服务供网页调取,以此实现网页和扫描仪的交互。
    
    扫描仪工作完成后,调取一个接口,从本地的扫描结果中返回图片的base64。
    然后,页面上再将base64一个个的传输到后台,获取服务器返回的url之后在系统中使用。
    
    	测试的时候,非常完美,但是实际使用的时候,却产生一个问题,客户的网络带宽比较低,导致上传图片的过程
    就很慢。
    	于是我就想到一个优化的办法,在前端将图片压缩之后传输到后台,并且不能失真。扫描出来的图片大小只有
    700~800k左右,体积已经比较小了,但是base64会导致数据包变大,一张图片的base64在1m以上。
    	
    	首先,先将base64转换成二进制对象
    
    	//base64转二进制
    	var strData = atob(base64)
    	var charData = strData.split('').map(function(x) { return x.charCodeAt(0) })
    	var binData = new Uint8Array(charData)
    
    	然后,再用pako.js将数据压缩
    
    	var str = pako.gzip(binData);
    
    	最后一步发送数据的时候,遇到一个问题,我用jquery封装的ajax方法发送数据的时候,浏览器会直接卡死。
    后来我在网上找到了一个用js原生方法的写法,就正常。
    
    	var oReq = new XMLHttpRequest();
    	oReq.open("POST", "后台url", true);// 请求的类型 后台的url 是否使用异步传输
    	oReq.onload = function (oEvent) {
    		//这里是请求成功之后触发
    		//oReq.responseText 可以获取后台返回的信息
    	};
    	
    	//这里设置发送的数据
    	oReq.send(str);
    
    	后台使用@RequestBody byte[] 就能接收到数据
    
    @PostMapping("/common/upimg")
        @ResponseBody
        public AjaxResult uploadBase64(@RequestBody byte[] data) throws Exception
        {
            try
            {
                // 上传文件路径
                String filePath = RuoYiConfig.getProfile() + "/fileImgs/";
                
                String currentDir = DateUtils.datePath();
                // 上传并返回新文件名称
                String fileName = UUID.randomUUID(true) + ".jpg";
                
                FileUtil.writeBytes(ZipUtil.unGzip(data), filePath + currentDir + "/" + fileName);
                
                String pathFileName = Constants.RESOURCE_PREFIX + "/fileImgs/" + currentDir + "/" + fileName;
                
                String url = serverConfig.getUrl() + pathFileName;
                AjaxResult ajax = AjaxResult.success();
                ajax.put("fileName", pathFileName);
                ajax.put("url", url);
                
                return ajax;
            }
            catch (Exception e)
            {
            	e.printStackTrace();
                return AjaxResult.error(e.getMessage());
            }
        }
    
    我这里是使用的ruoyi的后台通用上传方法修改的,解压是用的hutool封装的方法。
    建议能找到封装好的工具的话,尽量用封装好的工具类。但是封装好的工具也不一定是完全满足要求的。
    这个时候,就要自己尝试造轮子了。
    
    展开全文
  • * 网络图像文件Base64 */ function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getC

    直接看代码:

    /**
     * 网络图像文件转Base64
     */
    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
        var dataURL = canvas.toDataURL("image/" + ext);
        return dataURL;
    }
    
    
    /**
    *Base64字符串转二进制
    */
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
            type: mime
        });
    }
    
    
    var img = "图像文件URL地址";
    var image = new Image();
    image.src = img;
    image.onload = function() {
        //这样就获取到了文件的Base64字符串
        var base64 = getBase64Image(image);
        //Base64字符串转二进制
        var file = dataURLtoBlob(base64);
    }


    展开全文
  • 下面分享的是我曾经开发中遇到的问题:将上传的图片或程序生成的图片转换成二进制存入数据库,数据库中保存该图片的字段类型为blob //这里是将自动生成的图片转换成二进制 BufferedImage image= new ...

    下面分享的是我曾经开发中遇到的问题:将上传的图片或程序生成的图片转换成二进制存入数据库,数据库中保存该图片的字段类型为blob

     

    //这里是将自动生成的图片转换成二进制
    BufferedImage image= new BufferedImage(100,100, BufferedImage.TYPE_INT_RGB);
    Graphics2D g = image.createGraphics();
    g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    g.clearRect(0, 0, 100, 100);//创建一个100*100的画布
    Color c=new Color(45,204,112);//背景色
    g.setColor(c);
    g.fillRect(0, 0, 100, 100);
    g.setColor(new Color(255,255,255));//字体颜色
    Font font = new Font("宋体", Font.BOLD, 25);//字体、加粗、大小
    g.setFont(font);
    
    String name= "张三";
    //根据name长度自动调整名字在画布中的左右文字
    int nameLeng=name.getBytes().length;//名称字节长度
    float x_f=(float) (100-(nameLeng*13.5))/2;//X轴偏移量
    int x=Math.round(x_f);//偏移量取整
    g.drawString(name, x, 60);
    
    //重点来了
    ByteArrayOutputStream bs =new ByteArrayOutputStream();
    ImageOutputStream imOut =ImageIO.createImageOutputStream(bs);
    
    ImageIO.write(image,"jpg",imOut); //
    byte[] b=bs.toByteArray();
    Session sessions = getSessionFactory().openSession();
    LobHelper lobHelper = sessions.getLobHelper();
    Blob blob = lobHelper.createBlob(b);
    
    //此方法用于将上传的图片转换成Blob
    public Blob SetImageToByteArray(String zplj){
            FileInputStream is = null;
            Blob blob = null;
            Session session = getSessionFactory().openSession();
            try {
                File file = new File(zplj);
                is = new FileInputStream(file);
                int streamLength = (int)file.length();
                byte[] image = new byte[streamLength];
                is.read(image, 0, streamLength);//将字节流转换为byte数组
                LobHelper lobHelper = session.getLobHelper();
                blob = lobHelper.createBlob(image);
            } catch (IOException e) { e.printStackTrace(); } finally{ try { //关闭输出流
                is.close();
            } catch (IOException e) {
                e.printStackTrace();
            }finally {
                session.close(); }
            }
            return blob;
    }
    //本页面为getImg.jsp
    
    //这里是将二进制转换成图片
    Blob blob = ??;//这里的?是从数据库获取的二进制图片
    BufferedInputStream inputimage = new BufferedInputStream(blob.getBinaryStream());
    try{
        BufferedImage image = ImageIO.read(inputimage);
        OutputStream sos = response.getOutputStream();
        JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(sos);
        encoder.encode(image);
        inputimage.close();
        out.clear();
        out = pageContext.pushBody();
    }catch(IOException e){
        System.out.println(e);
    }
    
    //前台页面使用方法
    $("#exit_div").empty().append("<img src='getImg.jsp?ran="+Math.random()+"' />");

     

    展开全文
  • 因为设计的需要,将图片保存到数据库中(很不推荐这样做,这样会消耗数据库的磁盘io和网络带宽)需要完成的部分如下 图片上传的html页面 处理上传图片保存到数据库模块 上传成功取得数据库中的图片模块 图片上传的...
  • 前端二进制

    2020-07-08 17:00:00
    本文阿宝哥将按照以下的流程来介绍前端如何进行图片处理,然后穿插介绍二进制、Blob、Blob URL、Base64、Data URL、ArrayBuffer、TypedArray、Dat...
  • 因为随着XHR2和现代浏览器的普及,在浏览器当中处理二进制不再向过去那样无所适从,随着Canvas/WebGL等新技术逐渐开始进入大众视野,也会用到一些字节数组或者16位、8位整数等东西。在node.js刚刚发布的4.0版本中,...
  • vs2010,c++,将二进制流的图片转换成bmp图片,再转换成png图片
  • 思路:生成微信小程序码的时候,微信服务器返回的是图片二进制数据流,因此我们现在服务端将二进制流转换为base64进制数据流,然后返回给前端。前端将请求到的base64进制流转换进行下载。 这样可以有效避免需要通过...
  • 由于web端和app端调用的都是同一个获取谷歌验证码的接口,所以后端这个生成图片验证码的接口就与传统的直接将验证码图片写入到前端的方式不同,此时接口返回的应该这个经过base64编码后的验证码图片二进制流,然后.....
  • 认识二进制数据二进制是计算技术中广泛采用的一种数制。二进制数据是用 0 和 1 两个数码来表示的数。它的基数为 2,进位规则是 “逢二进一”,借位规则是 “借一当二”,由 18 世纪德国数理哲学大师 莱布尼兹 发现。...
  • 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返回的图片文件(二进制流),并在client端显示。 第一步思考:拿到此需求, 基于程序员的狂妄心里,思考到显示...
  • 前端将图片二进制流显示在html端

    万次阅读 2019-10-08 16:49:28
    base64,+已经encode的二进制代码,就可以在网页端显示出图片 <!DOCTYPE html> <html class=" "> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conten...
  • 主要是为了用cef做自动登录时打码用,但是又不想通过拦截response,因为那样太不够直观。 标签内容为: <img src="Image.do?_timesShow=2&amp;ran=100509925" title="点击更换图片!...图片显示为链接..
  • 后端如何将文件串给前端?? 一般后端通过流输出文件,前端直接get请求下载,但是这样功能受限了,这个请求...2、后端创建文件 ,读取文件的二进制数组,通过List传给前端(在spring mvc中 byte[] 会自动成base64字符
  • 因为随着XHR2和现代浏览器的普及,在浏览器当中处理二进制不再向过去那样无所适从,随着Canvas/WebGL等新技术逐渐开始进入大众视 野,也会用到一些字节数组或者16位、8位整数等东西。在node.js刚刚发布的4.0版本中,...
  • jpeg二进制数据base64后在前端显示

    千次阅读 2019-11-01 09:49:47
    直接二进制传输,中间层需要兼容,想着直接base64字符串,js刚好可以直接显示图片 Bse64是一种以64个可打印字符对二进制数据进行编码的编码算法。base64在对数据进行编码时以三个8位字符型数据为一组,取这三个...
  • ajax 接受二进制图片

    千次阅读 2018-03-05 10:20:50
    今天后台的跟我说ajax交互用户头像接口,我想这不难做呗,刷刷刷写完了,哎图片呢,怎么回事,这里我们前后端省略了status == 200这个判断//图片接口 $.ajax({ type:"get", url:"...
  • 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返回的图片文件(二进制流),并在client端显示。 第一步思考:拿到此需求, 基于程序员的狂妄心里,思考到显示...
  • 比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并到,就能看到它了,一张2*2的白色gif图片。在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据...
  • ASP.NET–图片上传通过二进制保存到数据库 开发工具:Visual Studio 2015、SQL Server 2014 Management Studio 关键技术:C# MVC 作者:刘东标 撰写时间:2019年1月18日 实现效果: 、、、、、、、、、、...
  • 解决了我的问题也完美表达了我当时的心路历程ajax 请求二进制图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践写在前面 :从提出需求到完美的解决问题,实现过程是曲折的。 需求:在前(web client...
  • 小编根据C1认证的成长路径整理了数据编码的相关资源,从零基础带你进入数据编码的世界,除了基础概念,还包含进制转换、进制计算、base64编码解码和二进制炸弹等。让小伙伴们从无到有,从浅入深的系统地学习数据编码...
  • 需要不会发生写入盘后不能使用的情况,那么就是,把任何文件(其实就是硬盘或是内存之类储存设备中的二进制形态)转化成base64字符串后,可以直接明文来传递,然后再base64还原成二进制再写入盘中即可完成以下是使用js调用...
  • js在进行浮点数运算时,必须留意精度、舍入误差及比较问题,当然浮点数的二进制表示我们也应该了解。除此之外本文还会讨论常见类型相互转化,对象输出string如何处理;函数、变量声明提前问题。
  • 最近业余时间在搞h5小游戏,由于同步协议过于频繁,和服务器之间的同步直接...ArrayBuffer对象、TypedArray对象、DataView对象是JavaScript操作二进制数据的一个接口。  (1)ArrayBuffer对象:代表内存之中的一段...
  • 二进制文件打包成 PNG 图像的工具。 用户可以加载bundle.wp文件并提取由原始文件路径索引的数据。 文件夹root/img/logo.png中的文件可以通过bundle.read("img/logo.png") == Uint8Array 辅助方法允许用户读取所...
  • 比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并到,就能看到它了,一张2*2的白色gif图片。  在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,531
精华内容 11,012
关键字:

js图片转二进制工具