精华内容
下载资源
问答
  • 运用了canvas技术,将照片格式转成base64格式,直接下载,建议用Hbuilder打开。
  • 前段base64压缩图片upload上传

    千次阅读 2018-01-17 11:11:14
    img base64 upload
    <template>
      <!--type=0 多图 1为单图-->
      <div class="base64-upload">
        <img src="../assets/addimg.png"  alt="" width="38" height="39">
        <input type="file"
               ref="uploadBtn"
               accept="image/jpeg,image/jpg,image/png,image/svg"
               @click="onClick"
               @change="onChange" />
      </div>
    </template>
    
    <script>
      import lrz from 'lrz'   //这里引用lrz 依赖 处理压缩
      import fastclick from 'fastclick'
      export default {
        data() {
          return {
    
          }
        },
        mounted(){
    
        },
        methods: {
          onClick(event){
            event.target.value = null        
            //避免上传图片后再次选择相同图片没效果,因为input file 的value 是相同的 不会触发change
          },
          onChange(event) {
            var _this=this;
            _this.$emit('start')
            if (event.target.files && event.target.files[0]) {
              let file = event.target.files[0]
              let reader = new FileReader()
              lrz(file,{width: 1920,quality :0.7})   
              // 这里的quality 是压缩百分比,但实际文件大小变成了10%左右
    
                .then(function (rst) {
                  reader.addEventListener('load', e => {  
                    let [, base64] = rst.base64.split(',')
                    _this.$api.post('/****/oss/base64/uploadAndSave',{   //your imgupload url
                      img:base64,
                      fileName:file.name,
                      formId:0,
                      tabName:'yj_trademark_img'
                    }).then(res=> {
                      var info = {
                        url: res.data.url,
                        pkidStr:res.data.pkidStr
                      }
                      _this.$emit('change', true,info)
                    })
                  })
                  reader.readAsDataURL(file)
                })
                .catch(function (err) {
                  _this.$emit('change', false,err)
                })
                .always(function (err) {
                });
            }
          }
        }
      }
    </script>
    
    <style scoped>
      .base64-upload {
        position: relative;
        width:38px;
        height:39px;
        display: inline-block;
      }
      input {
        width: 38px;
        height: 39px;
        top: 0;
        left: 0;
        opacity: 0;
        position: absolute;
      }
    </style>
    

    附上lrz 包的地址 及api
    https://www.npmjs.com/package/lrz

    展开全文
  • img = Base64.decode(icon.getBytes(), Base64.DEFAULT); }catch (Exception e){ } Bitmap bitmap; if (img != null) { bitmap = BitmapFactory.decodeByteArray(img, 0, img.length); @SuppressWarnings(...
  • 用户把手机里的图片传递给服务器,借助localResizeIMG.js可以将图片转化为base64格式,也可以生成缩略图 这样的好处是,极大的缩小了图片的大小,原本2-3M的图片传递到服务器只有十几到几十KB,即提高了图片传输速率...

    前言

    用户把手机里的图片传递给服务器,借助localResizeIMG.js可以将图片转化为base64格式,也可以生成缩略图

    这样的好处是,极大的缩小了图片的大小,原本2-3M的图片传递到服务器只有十几到几十KB,即提高了图片传输速率,也为用户节约了流量

    而在图片质量上几乎没有损耗,或者说质量是可控的。


    兼容安卓和IOS,可以从手机的文件夹选取图片,也可以直接调取手机的摄像头,支持一般的手机浏览器也支持微信。


    开始实施

    1、js文件的准备

    需要三个js文件

    jquery.min.js

    localResizeIMG.js

    mobileBUGFix.mini.js (在IDE中该文件报错,但是不影响使用。原因是有关键字const,可以修改为var不报错,也可以不修改。)

    下载地址

    http://download.csdn.net/detail/bestcxx/9717224


    2、jsp页面

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib uri="/struts-tags" prefix="s"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head>
    		<base href="<%=basePath%>">
    
    		<title>上传文件</title>
    
    		<meta http-equiv="pragma" content="no-cache">
    		<meta http-equiv="cache-control" content="no-cache">
    		<meta http-equiv="expires" content="0">
    		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    		<meta http-equiv="description" content="This is my page">
    
    	</head>
    
    	<body>
    	<input type="file"  accept="image/*">
    		<form action="<%=path %>/photoUp/receivePhoto.action" method="post">
    			<input type="hidden" name="pictureBase64" id="pictureBase64">
    			<br />
    			<input type="submit"  id="toUp" value="正在上传">
    		</form>
    	
    		<script src="./photoUp/js/jquery.min.js" type="text/javascript"></script>
    		<script src="./photoUp/js/localResizeIMG.js" type="text/javascript"></script>
    		<!-- mobileBUGFix.js 兼容修复移动设备 -->
    		<script src="./photoUp/js/mobileBUGFix.mini.js" type="text/javascript"></script>
    		<script type="text/javascript">
            $('input:file').localResizeIMG({
                 width: 700,//设置文件的宽度
                 quality: 0.8,//设置文件的高度
                 success: function (result) {
                 var img = new Image();
                 img.src = result.base64;
                 img.height=80;//设置缩略图高度
                 img.width=100;//设置缩略图宽度
                 
                 $('body').append(img);//缩略图显示在页面
                 console.log(result);
    			 $("#pictureBase64").val(result.clearBase64);
    			 $("#toUp").val("提交");//修改页面提交按钮为可提交状态
                 }
             });
    	</script>
    	</body>
    </html>
    

    3、后台java

    package com.demo.photo;
    
    import java.io.DataOutputStream;
    import java.io.FileOutputStream;
    import java.io.IOException;
    
    import sun.misc.BASE64Decoder;
    
    import com.opensymphony.xwork2.ActionSupport;
    
    @SuppressWarnings("serial")
    public class PhotoUp extends ActionSupport{
    	private String pictureBase64;
    
    	/*
    	 * 跳转到上传图片页面
    	 */
    	public String toReceivePhoto(){
    		return SUCCESS;
    	}
    	
    	/**
    	 * 处理前台的base64编码,转化为图片保存到指定路径
    	 * @return
    	 * @throws IOException
    	 */
    	public String receivePhoto() throws IOException{
    		
    		BASE64Decoder decoder = new BASE64Decoder();
    		
    			// Base64解码
    			byte[] b = decoder.decodeBuffer(pictureBase64);// 增加一个判空
    			for (int i = 0; i < b.length; ++i) {
    				if (b[i] < 0) {// 调整异常数据
    					b[i] += 256;
    				}
    			}
    			
    			String localPath = "d://a//";//生成jpeg图片的保存路径
    			
    			String fileName="testPhotoUp.jpeg";//图片名称
    			
    			DataOutputStream ous = new DataOutputStream(new FileOutputStream(localPath+fileName));//把文件保存到指定路径
    			ous.write(b);
    			ous.flush();
    			ous.close();
    	
    		return "success";
    	}
    	
    	public String getPictureBase64() {
    		return pictureBase64;
    	}
    
    	public void setPictureBase64(String pictureBase64) {
    		this.pictureBase64 = pictureBase64;
    	}
    	
    	
    	
    }
    

    4、xml配置文件

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE struts PUBLIC
    	"-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
    	"http://struts.apache.org/dtds/struts-2.1.7.dtd">
    	<struts>
    		<!--struts-default-->
    		               
    		<package name="phptoUp" extends="struts-default" namespace="/photoUp">
    		
    		<!-- http://localhost:8080/struts2go/photoUp/toReceivePhoto.action -->
    			<action name="toReceivePhoto" class="com.demo.photo.PhotoUp" method="toReceivePhoto">
    				<result name="success">/photoUp/toPhotoUp.jsp</result>
    			</action>	
    		
    			<action name="receivePhoto" class="com.demo.photo.PhotoUp" method="receivePhoto">
    				<result name="success">/photoUp/photoUp.jsp</result>
    				<result name="error">/photoUp/toPhotoUp.jsp</result>
    			</action>	
    		</package>	
    	</struts>
    


    原创声明:本文原创链接http://blog.csdn.net/bestcxx/article/details/53780998




    展开全文
  • 图片通过js代码压缩,通过base64压缩图片,修改图片质量或尺寸达到压缩图片体积
  • canvas压缩图片base64

    2019-07-08 11:46:08
    canvas压缩图片base64 //压缩图片 function ComporessImg() { } ComporessImg.prototype = { //base64Url 图片base64 size大小 yasuo: function (base64Url,callBack) {//callBack 回调函数 var img = new ...

    canvas压缩图片转base64

    //压缩图片
    function ComporessImg() {
    }
    ComporessImg.prototype = {
        //base64Url  图片base64   size大小
        yasuo: function (base64Url,callBack) {//callBack 回调函数
            var img = new Image();//创建一个image对象
            img.src = "data:image/jpeg;base64," + base64Url //并设置路径 这里写你要压缩的图片路径
            var data = ''
            img.onload = function () { //图片加载完成
                var canvas = document.createElement('canvas')//创建一个canvas
                var context = canvas.getContext('2d')//绘制画布
                var w = 400 //宽400px   根据自己设置
                var h = 600 //高600px    根据自己设置
                canvas.width = w; //设置画布宽
                canvas.height = h;//设置画布高
                context.clearRect(0, 0, w, h);//清楚画布
                var imageData = context.getImageData(0, 0, canvas.width, canvas.height); //复制画布上指定矩形的像素数据
                for (var i = 0; i < imageData.data.length; i += 4) {
                    // 当该像素是透明的,则设置成白色
                    if (imageData.data[i + 3] == 0) {
                        imageData.data[i] = 255;
                        imageData.data[i + 1] = 255;
                        imageData.data[i + 2] = 255;
                        imageData.data[i + 3] = 255;
                    }
                }
                context.putImageData(imageData, 0, 0); //将图像数据放回画布
                context.drawImage(img, 0, 0, w, h); //绘制图片
                data = canvas.toDataURL('image/jpeg', 0.3);//转换成base64 并压缩为当前质量得0.3
                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (isAndroid) { //判断如果没被压缩是一个白色的默认底色 再安卓上这个base64大概再2301
                    if (data.length < 2400) {
                        data = base64Url
                    }
                } else if (isiOS) {//在苹果上面大概6301
                    if (data.length < 6400) {
                        data = base64Url
                    }
                }
                callBack(data)//返回压缩之后的base64
            }
        }
    }
    
    
    使用
    var img = new ComporessImg()
    img.yasuo(‘图片’, function (params) {
    	//params为转换完的base64图片
    }) 
    
    展开全文
  • HTML5 base64图片压缩上传程序.HTML5 base64图片压缩上传程序.
  • 主要介绍了HTML5 JS压缩图片并获取图片BASE64编码上传方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • android 图片Base64压缩上传

    千次阅读 2016-08-18 11:32:02
    首先得到图片路径 photoPath, String base64Str = Bitmap2StrByBase64(compressImageFromFile(photoPath));  private Bitmap compressImageFromFile(String srcPath) {  BitmapFactory.Options newOpts =

    首先得到图片路径 photoPath,

    String base64Str = Bitmap2StrByBase64(compressImageFromFile(photoPath));    


     private Bitmap compressImageFromFile(String srcPath) {
            BitmapFactory.Options newOpts = new BitmapFactory.Options();
            newOpts.inJustDecodeBounds = true;//只读边,不读内容
            Bitmap bitmap = BitmapFactory.decodeFile(srcPath, newOpts);

            newOpts.inJustDecodeBounds = false;
            int w = newOpts.outWidth;
            int h = newOpts.outHeight;
            float hh = 800f;//
            float ww = 480f;//
            int be = 1;
            if (w > h && w > ww) {
                be = (int) (newOpts.outWidth / ww);
            } else if (w < h && h > hh) {
                be = (int) (newOpts.outHeight / hh);
            }
            if (be <= 0)
                be = 1;
            newOpts.inSampleSize = be;//设置采样率

            newOpts.inPreferredConfig = Bitmap.Config.ARGB_8888;//该模式是默认的,可不设
            newOpts.inPurgeable = true;// 同时设置才会有效
            newOpts.inInputShareable = true;//。当系统内存不够时候图片自动被回收

            bitmap = BitmapFactory.decodeFile(srcPath, newOpts);
    //      return compressBmpFromBmp(bitmap);//原来的方法调用了这个方法企图进行二次压缩
            //其实是无效的,大家尽管尝试
            return bitmap;
        }


     public String Bitmap2StrByBase64(Bitmap bit){
            ByteArrayOutputStream bos=new ByteArrayOutputStream();
            bit.compress(Bitmap.CompressFormat.JPEG, 40, bos);//参数100表示不压缩
            byte[] bytes=bos.toByteArray();
            bos.reset();  // TODO     有的图片本身不大压缩后反而变大, 暂未解决, 貌似没个卵用
            return Base64.encodeToString(bytes, Base64.DEFAULT);
        }




    展开全文
  • base64之js压缩图片

    千次阅读 2019-03-07 14:39:59
    在日常的一些项目中会有上传图片之类的接口,如果图片过大了再上传的时候是非常的耗时以及占用资源,在这里就给大家分享一下如何在js中把大的图片压缩成小的图片,我这里的功能是用户点击按钮调用相机或者选择文件后...
  • base64图片压缩

    千次阅读 2018-07-02 16:07:18
    var base64=canvas.toDataURL("image/jpeg",quality); callback(base64);//必须通过毁掉函数返回,否则无法及时拿到改值 } } //使用时 dealImage('...
  • 图片压缩转化成base64

    2018-12-03 09:45:38
    本插件用于将图片压缩转化为base64的格式,以便于传输给后台
  • 主要介绍了项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)的相关资料,需要的朋友可以参考下
  • //下载图片保存到本地 public static function curl_file_get_contents(url,url,url,path){ $hander = curl_init(); fp=fopen(fp = fopen(fp=fopen(path,‘wb’); curl_setopt(hander,CURLOPTURL,hander,CUR...
  • js图片base64压缩

    万次阅读 2015-09-29 17:35:02
    js图片base64 压缩
  • vue 图片Base64压缩上传

    千次阅读 2019-03-07 16:31:39
    最近做的一个vue项目,后台要求请求头是application/json格式的,所以我对axios 进行了全局设置了请求头;但是正常上传图片都是...对此和后台商量把图片转换成Base64在传过去 let _this = this; // console.l...
  • 一、上传图片压缩再转base64码 1、选择图片 官方api <view class="image-item" v-for="(item,index) in files" :key="index"></view> <view class="upload-button image-item" @click=...
  • 现在像很多WEB上传程序包括微信、QQ等在发送一些图片的时候,会自动压缩(衰减)图片,这样可有效保证速度,节省用户流量,这个例子采用base64图片压缩算法,...本代码可扩展为压缩图片后上传,但本源码的实例中,不包
  • 压缩base64图片大小

    千次阅读 2019-08-23 16:52:39
    项目中上传头像base64图片太大导致上传时间过长,或者后台奔溃问题,所以前端压缩base64大小解决这个问题 原理使用canvas进行图片压缩 参数说明: base64String:需要压缩base64图片 w: 图片的原始图片大小 ...
  • 前端图片压缩base64后台还原图片,后台工具类,前端代码。部分代码来自脚本之家。
  • 图片上传前 压缩base64图片压缩

    千次阅读 2018-07-27 15:06:21
    //获取base64图片大小,返回字节 var str = base64url.replace('data:image/png;base64,', ''); var equalIndex = str.indexOf('='); if (str.indexOf('=') > 0) { str = str.substring(0, equalIndex); } ...
  • 任意本地图片或者网络图片都能选择,选择后先进行压缩,然后直接转为base64
  • 本文主要介绍了canvas压缩图片转换成base64格式输出文件流的方法,具有很好的参考价值。下面跟着小编一起来看下吧
  • js压缩图片base64长度

    千次阅读 2016-12-07 10:09:12
    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas');...(function (base64){ var image = new Image(),newBase64,MAX_HEIGHT = 160; image.onload = function(){ var canvas = docu
  • Base64压缩

    2019-04-04 15:39:24
    图片压缩 *"> $("#file").change(function(){ var m_this = this; cutImageBase64(m_this,null,400,0.8); }) function cutImageBase64(m_this,id,wid,quality) { var file = m_this.files[0]; var ...
  • base64图片的String字符串压缩变小

    万次阅读 2020-07-09 14:18:00
    base64图片的String字符串压缩变小(自测不失真)依赖环境编写工具类编写测试类验证验证效果其他知识补充Thumbnails用法介绍 依赖环境 需求:最近前端反馈对于上传的图片资源过大因此需要进行压缩,考虑Java后台实现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,243
精华内容 17,697
关键字:

base64压缩图片