精华内容
下载资源
问答
  • layui上传压缩图片 JS实例 其实这些代码直接复制过去就可以使用的了,直接把请求接口,还有参数稍微改一下就好了 // 照片上传 function uploadImage(demo,i) { var uploadInst = upload.render({ elem: ''+demo ,...

    layui上传压缩图片

    JS实例
    其实这些代码直接复制过去就可以使用的了,直接把请求接口,还有参数稍微改一下就好了

    // 照片上传
    function uploadImage(demo,i) {
        var uploadInst = upload.render({
            elem: ''+demo
            ,url: '/person/uploadImg'// 这里的请求没啥作用,我只是不想让它报接口异常提示,写的临时接口(不做处理的)
            ,exts:"jpg|png|jpeg"
            ,accept:"images"
            ,size:"10240"
            ,before: function(obj){
                //预读本地文件示例,不支持ie8
                obj.preview(function(index, file, result){
                    //$(demo).attr('src', result); //图片链接(base64)
                    imgBase64(demo,file,2,0,result,function (base64) {
                        var data = {
                            idcard: $('#uploadIdcard').val()+"-"+i,
                            eno: tempEno,
                            base64: base64,
                            index: i
                        }
                        $.post("/person/uploadBase64",data,function(data){// 存储base64图片
                            layer.msg(data.message,{offset:'10%'})
                        })
                    });
                });
            }
            ,done: function(res){
                //上传成功
                return layer.msg(res.message,{offset:'10%'});
            }
            ,error: function(){
            }
        });
    }
    // 压缩图片
    function imgBase64(demo,file,wh,mark,bs,callback){
        if((file.size+"").length > 6){
            var reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = function(e) {
                var image = new Image() //新建一个img标签(还没嵌入DOM节点)
                image.src = e.target.result
                image.onload = function() {
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    var imageWidth = image.width / wh;   //压缩后图片的大小
                    var imageHeight = image.height / wh;
                    canvas.width = imageWidth
                    canvas.height = imageHeight
                    context.drawImage(image, 0, 0, imageWidth, imageHeight)
                    var base64 = canvas.toDataURL('image/jpeg',0.5);// 图片质量0.5
                    //压缩完成
                    $(demo).attr('src', base64);
                    var data = base64.replace(/^data:image\/\w+;base64,/, "");
                    var bytes = window.atob(data);
                    var ab = new ArrayBuffer(bytes.length);
                    var ia = new Uint8Array(ab);
                    for(var i = 0; i < bytes.length; i++) {
                        ia[i] = bytes.charCodeAt(i);
                    }
                    var blob = new Blob([ab], {
                        type: 'image/jpeg'
                    });
                    console.log('压缩后的图片大小', blob.size);
                    if((blob.size+"").length > 6 && mark != 1){// 超过1MB重新按比例3压缩一遍
                       imgBase64(demo,file,3,1,function (res) {
                           callback(res)
                       })
                    }else{
                        callback(data)
                    }
                }
            }
        }else{
    		$(demo).attr('src', bs);
    		callback(bs.replace(/^data:image\/\w+;base64,/, ""))
    	}
    }
    

    Java处理base64

    直接复制使用,引入对应依赖包或jar即可

    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.OutputStream;
    import Decoder.BASE64Decoder;
    	/**
    	 * 存储base64图片
    	 * @param imgStr
    	 * @param path
    	 * @return
    	 */
    	public static boolean generateImage(String base64, String path) {
    		if (imgStr == null)
    			return false;
    		BASE64Decoder decoder = new BASE64Decoder();
    		try {
    			File file = new File(path);  
    	        if (!file.getParentFile().exists()){// 先创建文件夹和文件
    	            file.getParentFile().mkdirs();
    	            file.createNewFile();
    	        }
    			byte[] b = decoder.decodeBuffer(imgStr);
    			for (int i = 0; i < b.length; ++i) {
    				if (b[i] < 0) {
    					b[i] += 256;
    				}
    			}
    			OutputStream out = new FileOutputStream(path);
    			out.write(b);
    			out.flush();
    			out.close();
    			return true;
    		} catch (Exception e) {
    			return false;
    		}
    	}
    

    Nodejs处理base64

    var express = require('express');
    var router = express.Router();
    var fs = require('fs');
    // base64转图片存储到本地
    router.post("/uploadBase64",function(req, res, next){
        var backData = new Object();
        backData.success=true;
        backData.message="上传成功";
        var body = req.body
        var dataBuffer = new Buffer.from(body.base64, 'base64');
        fs.writeFile(global.savePath+"/public/upload/"+body.idcard+".jpg",dataBuffer,function(err){//用fs写入文件
            if(err){
                console.log(err);
            }else{
                console.log('写入成功!');
            }
            res.send(backData);
        })
    })
    
    展开全文
  • 下面是后台接受的图片base64信息和报错代码: <p><img alt="" height="325" src="https://img-ask.csdnimg.cn/upload/1612362887165.png" width="1336" /></p> <p><img alt="" height="198" src=...
  •  我把富文本内容从后台导入到前端,回显在layui的layedit里面。 2. 步骤  直接在<textarea></textarea>中间进行赋值(我用的是模板赋值)。然后之后交给layui的build渲染。 。。。。。 <td&...

    1. 背景

      我把富文本内容从后台导入到前端,回显在layui的layedit里面。

    2. 步骤

      直接在<textarea></textarea>中间进行赋值(我用的是模板赋值)。然后之后交给layui的build渲染。

    。。。。。
     <td>
                            <textarea id="contentId" name="detail">
                                {$data['content']}
                            </textarea>
                        </td>
    。。。。。
    

       

    转载于:https://www.cnblogs.com/the-one/p/11445782.html

    展开全文
  • 前端上传图片base64格式,后台将base64存入本地和数据库 1、jsp页面代码 <div class="layui-form-item"> <label class="layui-form-label label_font" style="margin-top: 35px">缩略图</label&...

    前端上传图片转base64格式,后台将base64存入本地和数据库

    1、jsp页面代码

        <div class="layui-form-item">
            <label class="layui-form-label label_font" style="margin-top: 35px">缩略图</label>
            <div class="layui-input-block">
                <input style="margin-top: 7px;" type="file" id="file">
                <img id="showImg" style="max-height: 300px; height: 8em; min-width:8em;"/>
                <textarea name="new_img" id="base64" style="display: none; width: 100%;height: 30em;"></textarea>
            </div>
        </div>
    

    jsp页面效果
    在这里插入图片描述
    在这里插入图片描述
    2、JQuery

            //以下都为图片转base64格式
            $(document).on("change","#file",function(){
                run(this, function (data) {
                    $('#showImg').attr('src', data);
                    $('#base64').val(data);
                });
            });
            function run(input_file, get_data) {
                /*input_file:文件按钮对象*/
                /*get_data: 转换成功后执行的方法*/
                if (typeof (FileReader) === 'undefined') {
                    alert("抱歉,你的浏览器不支持 FileReader,不能将图片转换为Base64,请使用现代浏览器操作!");
                } else {
                    try {
                        /*图片转Base64 核心代码*/
                        var file = input_file.files[0];
                        //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                        if (!/image\/\w+/.test(file.type)) {
                            alert("请确保文件为图像类型");
                            return false;
                        }
                        var reader = new FileReader();
                        reader.onload = function () {
                            get_data(this.result);
                        }
                        reader.readAsDataURL(file);
                    } catch (e) {
                        alert('图片转Base64出错啦!' + e.toString())
                    }
                }
            }
    

    将转换好的base64格式赋值给<textarea name=“new_img” id=“base64” style="display: none; 。方便发送到后台接收。
    表单监听提交代码

            //监听提交
            form.on('submit(formDemo)', function(data){
                var index = parent.layer.getFrameIndex(window.name);
                $.ajax({
                   url:"${pageContext.request.contextPath}/up_newsInsert",
                   data:$("#insertForm").serialize(),
                   type:"post",
                   success:function(msg){
                        if(msg.code==100){
                            layer.msg("新增成功");
                            parent.layer.close(index);
                        }else{
                            layer.msg("请检查信息有无错误!");
                        }
                   },
                    error:function(){
                        layer.msg("请检查信息有无错误!");
                    }
                });
                return false;
            });
    

    3、Controller

        @RequestMapping("up_newsInsert")
        @ResponseBody
        public Msg up_newsInsert(Up_News up_news) throws Base64DecodingException {
            //先查询html文件序号
            Up_News un = up_newsService.up_selectNewsHtmlId();
            int html_id = 0;
            if (un==null){
                html_id = 1;
            }else {
                html_id = un.getNew_id()+1;
            }
            //图片路径
            String fileImgPath = "/usr/local/web/tomcat_test/tomcat/webapps/crm_web/news/newsImg";//阿里云
    //        String fileImgPath = "D:/developer/work/crm_web/src/main/webapp/news/newsImg";
            //保存图片
            String type = CreateImg.saveImg(up_news.getNew_img(),html_id,fileImgPath);
            up_news.setNew_img("new_img"+html_id+"."+type);
            //新增新闻信息
            int num = up_newsService.up_newsInsert(up_news);
            if (num != 0) {
                return Msg.success();
            }
            return Msg.error();
        }
    

    图片存存入本地,将图片名存入数据库。需要再次查询图片,调用图片名返回前台即可。
    4、base64转存本地Until

    public class CreateImg {
            public static String saveImg(String baseImg,Integer html_id,String fileImgPath) throws Base64DecodingException {
                //定义一个正则表达式的筛选规则,为了获取图片的类型
                String rgex = "data:image/(.*?);base64";
                String type = getSubUtilSimple(baseImg, rgex);
                //去除base64图片的前缀
                baseImg = baseImg.replaceFirst("data:(.+?);base64,", "");
                byte[] b;
                byte[] bs;
                OutputStream os = null;
                //把图片转换成二进制
                b = Base64.decode(baseImg.replaceAll(" ", "+"));
    
                File file = new File(fileImgPath);
                if (!file.exists() && !file.isDirectory()) {
                    file.mkdirs();
                }
                File imageFile = new File(fileImgPath+"/"+"new_img"+html_id+"."+type);
                BASE64Decoder d = new BASE64Decoder();
                // 保存
                try {
                    bs = d.decodeBuffer(Base64.encode(b));
                    os = new FileOutputStream(imageFile);
                    os.write(bs);
                } catch (IOException e) {
                    e.printStackTrace();
    
                }finally {
                    if (os != null) {
                        try {
                            os.close();
                        } catch (IOException e) {
                            e.getLocalizedMessage();
                        }
                    }
                }
                //返回图片后缀类型,如png、jpeg
                return type;
            }
    
            public static String getSubUtilSimple(String soap,String rgex){
                Pattern pattern = Pattern.compile(rgex);
                Matcher m = pattern.matcher(soap);
                while(m.find()){
                    return m.group(1);
                }
                return "";
        }
    
    展开全文
  • 1.编写上传图片页面 2.编写js代码 3.将图片转换成Base64编码赋值给对象,保存到数据库 4.图片回显

    1.编写上传图片页面
    在这里插入图片描述

    在这里插入图片描述
    2.编写js代码
    在这里插入图片描述
    3.将图片转换成Base64编码赋值给对象,保存到数据库
    在这里插入图片描述
    4.图片回显
    在这里插入图片描述

    展开全文
  • 图片上传至数据库创建表前端上传图片后端转换图片编码封装数据传入后端(提交按钮)数据解析、插入数据库 创建表 先创建一张表,图片字段用mediumtext存储。 前端上传图片 这里前端上传使用的是layui的组件,只要能...
  • 再整理图片上传发现blob流转base64图片预览上传到thinkphp5的文章很少,这次整理一个,希望对大家有帮助 1.使用了Bootstrap的filestyle的上传插件,layui的参考我其他的文章,对了记得引入bootstrap-filestyle.js...
  • 前端部分页面: <div class="layui-form-item"&...专题图片</label> <div class="layui-input-inline"> <div class="layui-upload-list"> <img class="layui-upload-img" name="titleBase
  • 前端部分页面: <div class="layui-form-item"&...专题图片</label> <div class="layui-input-inline"> <div class="layui-upload-list"> <img class="layui-upload-img" name="titleBase
  • 业务需求是这样的:前端实现图片上传裁剪并将裁剪后图片转换为base64位编码通过ajax传给后台,后台再将base64位编码生成图片路径返回给前台展示。 第一步:下载layUI官网提供的扩展组件cropper到本地,地址(htt...
  • 1.这是我前端的代码,有一个img标签,用来显示图片用的,还有一个 input type是file的输入框,其实就是选择图片的: <div class="layui-form-item"> <label class="layui-form-label">专题图片</...
  • web前端图片压缩方法可参考我这边文章:web前端 图片压缩后上传到阿里云oss 里面引用到的几个js文件可以在我的github上获取 ...结合layui框架使用,效果图 这里选择图片后,没有立马上传到服务器,先通过...
  • 导语:我们知道在开发微信小程序时,是不能直接在wxss文件里引用本地图片的,否则在运行时会出现如下错误:(学习视频分享:编程视频)“本地资源图片无法通过WXSS获取,可以使用网络图片,或者 base64,或者使用<...
  • layui表格填充img图像

    2020-08-10 10:51:41
    图片base64编码过后的数据 这样解析 for (var i = 0; i< arr.length; i++) { devices[i] = { dev_img: ('data:image/png;base64,'+arr[i].dev_img)||'./img/default.jpg'), }; } uin.app中图片的获取方法...
  • 前端使用layui图片上传,将文件base64编码,然后在后端使用转码类来操作base64编码,并保存图片到本地,继而获取文件地址,将文件地址保存到数据库中1.使用layui图片上传infoset.jsplayui.use('upload', ...
  • 前端使用layui图片上传,将文件base64编码,然后在后端使用转码类来操作base64编码,并保存图片到本地,继而获取文件地址,将文件地址保存到数据库中 1.使用layui图片上传 infoset.jsp layui.use('upload', ...
  • jquery图片压缩后上传(layui文件上传)HTML:我这里是用了layui的表单css代码:input type="file"样式js代码:压缩后的图片转化为base64格式再传给后端 项目需求:表单内选择图片上传,图片要在前端压缩后传给后端...
  • 背景:由于近期使用layui写前端,其中用它的控件实现图片上传,拿到的是转成Base64的数据,数据如下:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAY4AAADvCAYAAADl2zM3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8...
  • 背景:由于近期使用layui写前端,其中用它的控件实现图片上传,拿到的是转成Base64的数据,数据如下: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAY4AAADvCAYAAADl2zM3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8...
  • 把上图中的img标签中的base64图片转换为图片并压缩为小于100KB 页面布局: 代码: <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">未...
  • 前几天公司需要写一个文档编辑器,开始我用的是layui文档编辑器,发现layui很多都还没有,所以我就用了jQuery的summernote文档编辑器...这边我主要做个记录,该编辑器功能比较强大,上传图片直接转化为base64码 … ...
  • 一、为什么要验证码? 防暴力破解的课题一直是信息安全的重点,漏洞攻击更是开发者的噩梦。。。。 如果没有经历过这个...后端随机读取一张图片,利用算法随机“抠图”,返回base64码值到前端 前端读取到base...
  • jq 根据返回的时间判断昨天、今天

    千次阅读 2017-09-21 11:28:27
    最近开发的项目是关于社交类的,其中有一个功能是发表动态,我运用layui中的layedit去创建简单的编辑器,上传图片是根据base64和后台对接。其中,动态列表通过ajax请求,后台返回的时间是时间戳格式,需求是:今天和...
  • 对于密码的加密,一般每个开发者都有自己的想法,我的加密比较简单 md5+base64,可自行复杂性优化 > 封装处理方法为:IAuth::setAdminUsrPassword() > 修改数据的时候,注意,如果不想改动密码,是无需进行...

空空如也

空空如也

1 2
收藏数 27
精华内容 10
关键字:

layui图片base64