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

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

月光魔力鸭

2020-03-11 09:39 阅读 887 喜欢 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全靠猜...
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。
在页面中不同的frame之间进行相互调用的话,我们可以通过frame获取对应的window然后进行调用,但是如果是浏览器不同的tab之间呢?
最近做个nodejs的项目,使用了thinkjs 3.0 的框架,编辑器为vs code ,之前用的好好的,每次 . 后都有提示的,可是使用了多模块后发现.. model的提示没有了..
做作业的时候,需要在手机上预览下,但是发现如果想在移动端上展示A4样子的作业还是挺麻烦的,最后还是准备通过图片来展示,然后移动端缩放呗。。
Question from codewar,about all of array combinations.
之前一直没面试过前端,今天有一个,先整理下需要问的问题和答案。这里都是一些简单的问题,关于当下比较流行的框架并没有涉及到..
在开发过程中经常会碰到跨frame 去操作的需求,那么如何获得这个frame呢,这里写了一个工具类,用来通过name获得frame的jq对象