如何从前端读取图片并处理二进制数据

如何从前端读取图片并处理二进制数据

月光魔力鸭

2020-03-11 09:39 阅读 750 喜欢 0 前端处理图片

前端时间搞了个小转码,放在后台,但是特别占带宽,想着能不能从前台把这个事搞定呢?读取图片的二进制,然后将字节流处理后重新生成图片展示处理啊。

需求很简单,页面选择图片,然后获取图片,读取字节码,异或一个值后,然后重新生成图片在页面上显示。

    var reader = new FileReader();
    reader.readAsArrayBuffer(file);//file 源文件

    reader.onload = function(bf) {
        var content = new DataView(this.result);
        for (var i = 0; i < content.byteLength; i++) {
            var br = content.getInt8(i) ^ coder;
            content.setInt8(i, br);
        }
        var binary = '';
        var bytes = new Uint8Array(content.buffer);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        var str = window.btoa(binary); 
         //将图片转成base64字符串
        var img = new Image();
        img.src = 'data:image/png;base64,' + str;
    }

以上是核心代码,主要是通过DataView 这个对象,获取他的byte数组,然后进行处理,再从Unit8Array组装回来。

转载请注明出处: https://chrunlee.cn/article/read-image-convert-file.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
整理下关于axios的使用,一些常用的调用、处理以及其他。
如何通过js调用本地摄像头呢?获取后如何对视频进行截图呢?在这里跟大家做一个简易的Demo来实现以上几个功能。
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。
codewars上的一个题目,这里记录下解决方法。
通过jspdf ,我们可以将页面或图片生成pdf下载下来,如果是一些复杂的页面,我们可以将页面转成图片,然后把图片加入到pdf中,生成并下载。
在我们通过canvs画图的时候经常会用到圆,且需要计算出圆上某点的坐标,由于我数学没学好,总是记不得怎么获取,这里记录下,加深记忆
在开发过程中多个页面使用的一个小工具类,简单完善了下,还算不错,给各位提供下小思路。
项目中需要使用treegrid,找了下easyui 和 ext都有,但是项目用的框架是 byyui,如果为了treegrid 就把这些都加载的话,感觉不太合算。找了大家常用的基于jquery的treegrid.