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

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

月光魔力鸭

2020-03-11 09:39 阅读 1153 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
最近一直在想着抓一些网盘数据,进行资料归拢,可是当我真正开始的时候.. 还是遇到了反爬,当然我本身就有心理预期,这是肯定会碰到的,只是没想到会在代理IP上耗费这么久,之前的时候也处理过代理IP ,可是由于一知半解,导致很多配置都不理解,debug全靠猜...
我们经常会有判断一个数值是素数的需求,那么我们如何来实现呢?
我们有时候会拿textarea来做编辑器,但是常用编辑器都是支持tab缩进的,这里对textarea监听下事件处理下即可实现。
今天刷codewars的题目的时候碰到一个通过js来实现字符串转base64的题目,base64虽然在js或nodejs中经常用,但是我还真没有仔细去看过原理以及如何实现,这回绕不过去了,赶紧找了找资料看了下。
偶尔练习下canvas,这里简单记录下常用API,防止遗忘..加深记忆..努力提高..争取突破...daydayup
在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。
现象:在IOS中,jsp页面绑定的点击事件,点击后延迟很大,接近1000ms,反应很慢
通过修改数据库编码处理存储emoj表情导致的报错问题。