zoukankan      html  css  js  c++  java
  • 图片采用base64压缩,可以以字符串的形式传送base64给服务端转存为图片

    (function () {
        var coverImage = document.querySelector('<div id="coverImage">file</div>');
        //图片压缩
        coverImage.onchange = function () {
            lrz(this.files[0], { 640}, function (results) {
                
                // 你需要的数据都在这里,可以以字符串的形式传送base64给服务端转存为图片。
                var base64 = results.base64;
                function base64UrlToBlob(base64){
                    var bytes=window.atob(base64.split(',')[1]);        //去掉url的头,并转换为byte
                    //处理异常,将ascii码小于0的转换为大于0
                    var ab = new ArrayBuffer(bytes.length);
                    var ia = new Uint8Array(ab);
                    for (var i = 0; i < bytes.length; i++) {
                        ia[i] = bytes.charCodeAt(i);
                    }
                    return new Blob( [ab] , {type : 'image/jpg'});    //return Blob对象
                }
                var formData = new FormData($("#toPic")[1]);
                var blob = base64UrlToBlob(base64);
                console.log(blob);
                formData.append("coverImage",blob);
                $.ajax({
                    url: "xxx",
                    type: "POST",
                    data: formData,
                    dataType: "json",
                    contentType:false,
                    processData: false,         
                    success: function (json) {
                        console.log(json);
                    },
                });
                setTimeout(function () {
                    demo_report('预压的图片', base64, base64.length * 0.5);
                }, 100);
                
            });
        };
    })();
     (function () {
        var coverImage = document.querySelector('<div id="coverImage">file</div>');
        //图片压缩
        coverImage.onchange = function () {
            lrz(this.files[0], { 640}, function (results) {
            
                // 你需要的数据都在这里,可以以字符串的形式传送base64给服务端转存为图片。
                var base64 = results.base64;
                function base64UrlToBlob(base64){
                    var bytes=window.atob(base64.split(',')[1]);        //去掉url的头,并转换为byte
                    //处理异常,将ascii码小于0的转换为大于0
                    var ab = new ArrayBuffer(bytes.length);
                    var ia = new Uint8Array(ab);
                    for (var i = 0; i < bytes.length; i++) {
                        ia[i] = bytes.charCodeAt(i);
                    }
                    return new Blob( [ab] , {type : 'image/jpg'});    //return Blob对象
                }
                var formData = new FormData($("#toPic")[1]);
                var blob = base64UrlToBlob(base64);
                console.log(blob);
                formData.append("coverImage",blob);
                $.ajax({
                    url: "xxx",
                    type: "POST",
                    data: formData,
                    dataType: "json",
                    contentType:false,
                    processData: false,         
                    success: function (json) {
                        console.log(json);
                    },
                });
                setTimeout(function () {
                    demo_report('预压的图片', base64, base64.length * 0.5);
                }, 100);
                
            });
        };
    })();

    作者:freddyhuang
    出处:https://www.cnblogs.com/freddyhuang
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    Java工作流引擎全局变量的介绍
    Java工作流系统-CCBPM如何自动升级?
    驰骋工作流系统-Java共工作流引擎配置定时任务
    那些年下过的大雨
    移动端APP列表点透事件处理方法
    关于React中状态保存的研究
    几个关于js数组方法reduce的经典片段
    关于React组件之间如何优雅地传值的探讨
    模拟制作网易云音乐(AudioContext)
    移动端效果之IndexList
  • 原文地址:https://www.cnblogs.com/freddyhuang/p/5988781.html
Copyright © 2011-2022 走看看