资讯专栏INFORMATION COLUMN

文件上传前压缩图片尺寸大小,支持安卓微信APP浏览器

Tony / 1793人阅读

    function ImageFileResize(file, maxWidth, maxHeight, callback) {
        var Img = new Image;
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");

        Img.onload = function() {
            if (Img.width>maxWidth || Img.height>maxHeight) {
                var bili = Math.max(Img.width/maxWidth, Img.height/maxHeight);
                canvas.width = Img.width/bili;
                canvas.height = Img.height/bili;
            }else{
                canvas.width = Img.width;
                canvas.height = Img.height;
            }
            ctx.drawImage(Img, 0, 0, Img.width, Img.height, 0, 0, canvas.width, canvas.height);

//            $("body").append(canvas);
            callback(canvas.toDataURL());
        };

        try{
            Img.src = window.URL.createObjectURL(file);
        }catch(err){
            try{
                Img.src = window.webkitURL.createObjectURL(file);
            }catch(err){
                alert(err.message);
            }
        }
    }

    $(".js-uploader").on("click", function () {
        var $clickObj = $(this);
        var $fileInput = $("");

        $fileInput.on("change",function () {
            $clickObj.text("正在上传...");

            ImageFileResize($fileInput[0].files[0], 800, 800, function (dataUrl) {
                $.ajax({
                    type: "POST",
                    url: "createMobileUrl("Upload")?>",
                    data: {imgDatUrl:dataUrl},
                    success : function (ret) {
                        $clickObj.prev().remove();
                        $clickObj.before(" ");
                        $clickObj.next().val(ret.path);
                        $clickObj.text("重新上传");
                    },
                    dataType : "json"
                });
            });
        });

        $fileInput.click();
    });

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/60854.html

相关文章

  • 文件上传压缩图片尺寸大小支持安卓微信APP览器

    function ImageFileResize(file, maxWidth, maxHeight, callback) { var Img = new Image; var canvas = document.createElement(canvas); var ctx = canvas.getContext(2d); Img....

    罗志环 评论0 收藏0
  • 文件上传压缩图片尺寸大小支持安卓微信APP览器

    function ImageFileResize(file, maxWidth, maxHeight, callback) { var Img = new Image; var canvas = document.createElement(canvas); var ctx = canvas.getContext(2d); Img....

    xialong 评论0 收藏0
  • 移动端H5实现图片上传

    摘要:需求公司现在在移动端使用实现图片上传,但最近需求太奇葩了,插件无法满足我们的经过商讨决定下掉这个插件,使用原生的实现图片上传。首先是有几种常见的移动端图片上传方式通过对象可以组装一组用发送请求的键值对。 需求 公司现在在移动端使用webuploader实现图片上传,但最近需求太奇葩了,插件无法满足我们的PM经过商讨决定下掉这个插件,使用H5原生的API实现图片上传。 7.3日发布:单张...

    WelliJhon 评论0 收藏0
  • <转载>图片流量节省60%:基于CDN的sharpP自适应图片技术实践

    摘要:开启验证上传一张新图片,使用手安卓版本访问已支持域名的图片,如果请求带了,检查返回图片格式是否为如果旧的图片未按预期返回,返回了或原图可能是结点缓存,正常天后过期回源则会返回图片。 对于图片较多的网站,本文结合具体案例给出了如何基于CDN的sharpP自适应图片无痛接入方案,据统计效果可在原图基础上节省60%-75%的流量。作者:陈忱 出处:腾云阁文章 目前移动端运营素材大部分依赖图...

    JerryZou 评论0 收藏0
  • 使用WebUploader解决安卓微信览器上传图片中遇到的bug

    摘要:具体的环境我也不太了解,但是经过实际多台安卓机型的测试,我采取的方案可以基本确保在安卓机中微信浏览器的成功上传。 摘自个人博客:走啊走的记录,欢迎点击查看,效果更佳! 微信浏览器上传图片bug的原因 微信在新版本中采用的是自己的X5内核浏览器,而在较老的版本中还有可能是安卓的原生浏览器。具体的环境我也不太了解,但是经过实际多台安卓机型的测试,我采取的方案可以基本确保在安卓机中微信浏览器...

    ybak 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<