图片采用base64压缩,可以以字符串的形式传送base64给服务端转存为图片

(function () {
    var coverImage = document.querySelector(‘<div id="coverImage">file</div>‘);
    //图片压缩
    coverImage.onchange = function () {
        lrz(this.files[0], {width: 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], {width: 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);
            
        });
    };
})();

时间: 2024-10-11 22:09:37

图片采用base64压缩,可以以字符串的形式传送base64给服务端转存为图片的相关文章

服务端开发之下载图片等文件

服务端开发中,当客户端需要加载服务端发送的图片文件时,需要服务端提供一个下载图片的程序. 下载图片工具类的代码如下: import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.InputStream; public class DownloadImageUtil { public stat

在CentOS7上安装ftp服务器用于保存服务端上传的图片。

1.CentOS卸载vsftpd的方法 如果服务器上已经安装了vsftpd服务,配置出错需要卸载vsftpd服务. 1.1 查找vsftpd服务 [[email protected] /]# rpm -aq vsftpd 返回结果显示: vsftpd-3.0.2-21.el7.x86_64 #此处是查找vsftpd的返回结果 表示此服务期之前已经安装过vsftpd服务. 1.2 删除查找到的vsftpd服务 注:在卸载vsftpd之前,先停止vsftpd [[email protected] /

C#对图片文件的压缩、裁剪操作

在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便.毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件的,也由于个人水平方面原因,处理效果差强人意. 于是采用C#为我们提供的图像编辑功能,实现一站式上传,通过程序生成所需大小.尺寸的目标图片. 进入正题--> 先说图片压缩 第一步:需要读取一个图片文件,读取方法: // <param name="ImageFilePathAndName">图片文件的全路径名称&

C#对图片文件的压缩、裁剪操作初探

在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便.毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件的,也由于个人水平方面原因,处理效果差强人意. 于是采用C#为我们提供的图像编辑功能,实现一站式上传,通过程序生成所需大小.尺寸的目标图片. 进入正题--> 先说图片压缩 第一步:需要读取一个图片文件,读取方法: // <param name="ImageFilePathAndName">图片文件的全路径名称&

在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文件上传,在chrome, firefox下运行良好,但在某些版本的IE浏览器(比如IE8,IE9)下却无法正常运行,这可能是因为JSAjaxFileUploader插件在编写时没有考虑到某些低版本IE浏览器导致的.本篇,就在ASP.NET MVC4下实现单个图片上传,具体功能包括: 1.在客户端选择图片,并限

前端预览图片和H5canvas压缩图片上传

思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, ref to https://gist.github.com/fupslot/5015897 * @param dataURI * @returns {Blob} */ function dataURItoBlob(dataURI) { var byteString = atob(dataURI.spl

使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不够. 下面我们就说说,利用canvas 生成带水印的图片. 1.我们要实现一下效果 2.创建一个canvas var canvas = document.createElement('canvas'); var time = new Date(); var logoCanvas =time+' '+

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be

HTML5 file API加canvas实现图片前端JS压缩并上传 (转载)

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片