Ubuntu Linux14 64号生以Android studio下用gradle编译Andrid项目时来libz.so.1共享库找不顶之化解办法。

  摘要:之前以召开一个小游戏平台型,有只“用户中心”模块,就涉嫌到了头像上传的效应。在举行运动端图片上传的当儿,传之还是手机本地图片,而本土图片一般还相对较好,拿本底智能手机来说,平时拍多图都是两三兆的,如果一直这样齐传,那图片就最为怪了,如果用户之所以的是走流量,完全把图片上传显然不是一个好方法。所以上传之前进行压缩处理是必需之,在网上搜寻了无数素材后,尝试了众多措施,遇到了众坑,比如安卓会得逞减掉上污染图片,在ios上却达到传不了,折腾了异常漫长才发现ios的坑。一下这种既上了实践证明是行之,几兆的图纸最后还能够减少至我们后端要求的200k以内!这么实用的章程必须被大家省【ps:都是些东并西凑别人的法出来的,嘻嘻~】。

—恢复内容开始—

 

本身以Ubuntu14 64为下安装了AS,但以于是Gradle编译项目时总是报找不交
libz.so.1底不当。

  时来说,HTML5的各种新API都以运动端的webkit上取得了比好的实现。根据查看caniuse,本demo里使用及之FileReader、Blob、Formdata对象均已当大多数平移装备浏览器中取了实现(safari6.0+、android
3.0+),所以直接当前者压缩图片,已经化为了好多活动端图片上传的不可或缺功能了。

error while loading
shared librarieserror while loading shared libraries: :
libz.so.1libz.so.1: : cannot open shared object filecannot open shared
object file: : No such file or directoryNo such file or director

  以倒端压缩图片以上传主要用到filereader、canvas 以及 formdata
这三个h5的api。逻辑并无碍事。整个过程就是是:

点的哪怕是所报的荒唐,表示是共享库找不至了。

  (1)用户用input
file上传图片的时段,用filereader读取用户上传的图纸数(base64格式)

脚用apt-file命令搜索这个文件,首先使系统受莫安装此命令的要先安装:

  (2)把图纸数传img对象,然后以img绘制到canvas上,再调用canvas.toDataURL对图纸展开削减

sudo apt-get install apt-file

  (3)获取到压缩后的base64格式图片数,转成为二迈入制塞入formdata,再通过XmlHttpRequest提交formdata。

发生或会见提示而更新

  如此三步,就到位了图片的压缩和上传。

sudo apt-file update

  说起来好像特别简单,其实还是出若干坑的。接下来就是一直用代码进行解析:

用命令搜索:

  【一】获取图片数

sudo apt-file search libz.so.1

  先是获取图片数,也就是监听input
file的change事件,然后取到上传的文书对象files,将类数组的files转成为屡组,然后开展forEach遍历。

自己的系统所取得的结果:

  就判断文件类型,如果不是图则非发处理。如果是图形就实例化一个filereader,以base64格式读取上传的文本数量,判断数长度,如果过量200KB的图就调用compress方法进行削减,否则调用upload方法开展上传。

lib32z1: /usr/lib32/libz.so.1
lib32z1: /usr/lib32/libz.so.1.2.8
libx32z1: /usr/libx32/libz.so.1
libx32z1: /usr/libx32/libz.so.1.2.8
zlib1g: /lib/x86_64-linux-gnu/libz.so.1
zlib1g: /lib/x86_64-linux-gnu/libz.so.1.2.8

filechooser.onchange = function() {
    if (!this.files.length) return;

    var files = Array.prototype.slice.call(this.files);

    if (files.length > 9) {
        alert("最多同时只可上传9张图片");
        return;
    }

    files.forEach(function(file, i) {
        if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;

        var reader = new FileReader();

        var li = document.createElement("li");
        li.innerHTML = '<div class="progress"></div>';
        $(".img-list").append($(li));

        reader.onload = function() {
            var result = this.result;
            var img = new Image();
            img.src = result;

            //如果图片大小小于200kb,则直接上传
            if (result.length <= maxsize) {
                $(li).css("background-image", "url(" + result + ")");
                img = null;
                upload(result, file.type, $(li));

                return;
            }

            //图片加载完毕之后进行压缩,然后上传
            if (img.complete) {
                callback();
            } else {
                img.onload = callback;
            }

            function callback() {
                var data = compress(img);

                $(li).css("background-image", "url(" + data + ")");

                upload(data, file.type, $(li));

                img = null;
            }

        };

        reader.readAsDataURL(file);
    })
};

始发之早晚我入了/usr/lib32,但绝非觉察发生libz.so.1这个文件,尽管查下了,但哪怕从未顾在那。

 

有关/usr/libx32,我TMD连是目录都于不起头,提示非存在,好吧,linux新手,很多都为不懂.

【2】压缩图片

下一场我进去/lib/x86_64-linux-gnu/目录下,发现libz.so.1只不过是一个链接文件,链接的是libz.so.1.2.8,好吧,不管那么多,

  上面做扫尾图片数的得后,就足以做compress压缩图片的艺术了。而压缩图片也并无是直拿图片绘制到canvas再调用一下toDataURL就实施之。

以libz.so.1.2.8复制到SDK中之build-tools/lib/
目录下,当然,名称最为好改吧libz.so.1最好。(其实呢得就此软链接,不过我以网上看局部网友说软链接有问题,嘛,新手或者保证低点,先管题目解决在说其他的。)

  以IOS中,canvas绘制图片是发生个别只限的:

下一场再就此as编译
,在日记中尚是有误,不过错误变成了无法以时64号之共享库,嘛,好像是盖SDK只发生32各项之,所以64各项的共享库无法使用,好吧,看来只有利用32个的了。

  首先是图片的轻重,如果图片的轻重超过两百万像素,图片为是无能为力绘制到canvas上之,调用drawImage的当儿不见面报错,但是你用toDataURL获取图片数的时光得到到的凡空的图样数。

动命令:

  再者就是canvas的高低有限定,如果canvas的大小大于大概五百万如从(即宽高乘积)的时刻,不仅图片写不下,其他什么事物也还是写不出来的。

sudo apt-get install lib32z1

  应针对第一种范围,处理办法就是瓦片绘制了。瓦片绘制,也不怕是将图纸分割成多块绘制到canvas上,我代码里之做法是将图纸分割成100万如从一片的轻重,再绘制到canvas上。

得要是sudo才行哦。然后以到/usr/lib32目录下来就看看出矣libz.so.1.2.8者文件,好了,将之文件复制或链接到build-tools/lib/
下就足以了。

  而应本着亚种植范围,我的拍卖措施是针对性图片的方便高进行适宜减少,我代码里为保险起见,设的上限是四百万像素,如果图片大于四百万像从即抽至低于四百万诸如从。四百万如从的图样应该足够了,算起来宽高都生2000X2000了。

 

  如此一来便缓解了IOS上的少栽限制了。

费了自我一样龙,其实也未是呀复杂的东东,只能说,百度真的非常烂。

  除了上面所陈述之限定,还有点儿只坑,一个哪怕是canvas的toDataURL是只能压缩jpg的,当用户上传的图样是png的说话,就得改变成为jpg,也就算是联合用canvas.toDataURL(‘image/jpeg’,
0.1) , 类型统一而成jpeg,而缩减比就融洽决定了。

 

  另一个就是是一旦是png转jpg,绘制到canvas上之上,canvas存在透明区域来说,当转成为jpg的时段透明区域会化黑色,因为canvas的透明像素默认为rgba(0,0,0,0),所以转成jpg就成rgba(0,0,0,1)了,也就算是晶莹剔透背景会化为了黑色。解决办法就是绘制之前在canvas上铺设一重叠白色之最底层。

参考:http://www.th7.cn/system/lin/201503/95956.shtml

function compress(img) {
    var initSize = img.src.length;
    var width = img.width;
    var height = img.height;

    //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
    var ratio;
    if ((ratio = width * height / 4000000) > 1) {
        ratio = Math.sqrt(ratio);
        width /= ratio;
        height /= ratio;
    } else {
        ratio = 1;
    }

    canvas.width = width;
    canvas.height = height;

    //铺底色
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    //如果图片像素大于100万则使用瓦片绘制
    var count;
    if ((count = width * height / 1000000) > 1) {
        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片

        //计算每块瓦片的宽和高
        var nw = ~~(width / count);
        var nh = ~~(height / count);

        tCanvas.width = nw;
        tCanvas.height = nh;

        for (var i = 0; i < count; i++) {
            for (var j = 0; j < count; j++) {
                tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);

                ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
            }
        }
    } else {
        ctx.drawImage(img, 0, 0, width, height);
    }

    //进行最小压缩
    var ndata = canvas.toDataURL('image/jpeg', 0.1);

    console.log('压缩前:' + initSize);
    console.log('压缩后:' + ndata.length);
    console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%");

    tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;

    return ndata;
}

 

 

 

【三】图片及污染

苦恼,今天打开Android Studio
1.3时时意识无法新建项目了,每次在输入型名为之不胜页面点击Next后便从未有过反应了,软件也深受噎坏了,然后呢,我虽把sdk下之之/lib/libz.so.1链接删除了,把现有软件删除后更打zip文件中解压出来后还打开,又可运行了,而且即使从未引入libz.so.1也可编译Android项目,不亮堂怎么回事。

  完成图片压缩后,就足以塞进formdata里开展上传了,先将base64数据变动成字符串,再实例化一个ArrayBuffer,然后以字符串以8各类整型的格式传入ArrayBuffer,再经BlobBuilder或者Blob对象,将8各项整型的ArrayBuffer转成二进制对象blob,然后把blob对象append到formdata里,再经过ajax发送给后台即可。

怀疑:

  XmlHttpRequest2中不但可以发送大数据,还差不多生了以取发送速度的API,我代码里啊开展了简易的贯彻。

1,SDK终于产一体化了。(不过自己觉得不太可能,好像也没有下啊特别之文书啊!)

//图片上传,将base64的图片转成二进制对象,塞进formdata上传
function upload(basestr, type, $li) {
    var text = window.atob(basestr.split(",")[1]);
    var buffer = new ArrayBuffer(text.length);
    var ubuffer = new Uint8Array(buffer);
    var pecent = 0,
        loop = null;

    for (var i = 0; i < text.length; i++) {
        ubuffer[i] = text.charCodeAt(i);
    }

    var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;
    var blob;

    if (Builder) {
        var builder = new Builder();
        builder.append(buffer);
        blob = builder.getBlob(type);
    } else {
        blob = new window.Blob([buffer], {
            type: type
        });
    }

    var xhr = new XMLHttpRequest();
    var formdata = new FormData();
    formdata.append('imagefile', blob);

    xhr.open('post', '/cupload');

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log('上传成功:' + xhr.responseText);

            clearInterval(loop);

            //当收到该消息时上传完毕
            $li.find(".progress span").animate({
                'width': "100%"
            }, pecent < 95 ? 200 : 0, function() {
                $(this).html("上传成功");
            });

            $(".pic-list").append('<a href="' + xhr.responseText + '">' + xhr.responseText + '<img src="' + xhr.responseText + '" /></a>')
        }
    };

    //数据发送进度,前50%展示该进度
    xhr.upload.addEventListener('progress', function(e) {
        if (loop) return;

        pecent = ~~(100 * e.loaded / e.total) / 2;
        $li.find(".progress span").css('width', pecent + "%");

        if (pecent == 50) {
            mockProgress();
        }
    }, false);

    //数据后50%用模拟进度
    function mockProgress() {
        if (loop) return;

        loop = setInterval(function() {
            pecent++;
            $li.find(".progress span").css('width', pecent + "%");

            if (pecent == 99) {
                clearInterval(loop);
            }
        }, 100)
    }

    xhr.send(formdata);
}

2,Ubuntu更新了。我的Ubuntu是64员之,装的是gnome3桌面系统,我意识自己之系统启动画面转换了,原来启动时凡一直由上马操作系统选择窗口跳至用户登录窗口,然后输入用户名密码就只是记名,现在会在中插入两屏字符刷一下屏,搞不知晓,而且自倍感第一潮登录体系后以图形化的方法启动软件好慢,以前即便没就丁感觉。

 

 

  至此,整个上传的前端图片压缩虽完成了,因为凡故了formdata提交,所以后台接数据的时刻就与一般form表单提交数据一致处理即可。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注