vue项目base64字符串转图片的实现代码


Posted in Javascript onJuly 13, 2018
<img :onerror="errpic" class="customerHead" :src="param.customerHead" alt="">
data() {

return {


param:{ 
 


id:"",
   


customerHead: "",


}

}
}
let _this = this
let files = e.target.files[0]
if (files.size/(1024*1024) > 2) {
this.open('上传的图片不可大于2M!')
return false;
}
var reader = new FileReader();
reader.onload = function (e) {
var base64 = e.target.result;
_this.param.customerHead = base64
//console.log(base64)
}
if(files) {
reader.readAsDataURL(files);
}

vue项目base64字符串转图片的实现代码

如果修改头像,向后台传base64字符串,否则会传原图片路径,后台判断是否是base64字符串.

如果是base64字符串,则对base64字符串进行处理,在后台服务器生成图片.此处需要对base64字符串进行处理,如图所示,删除蓝框部分,留逗号之后的内容.

若为图片路径,则不需要进行处理,直接返回图片路径即可.

vue项目base64字符串转图片的实现代码

@Value("${upload.image.path}")
private String filePath;
//base64字符串转化成图片 headerImgPath:http://+ip+:端口号 
  public String generateImage(String imgStr,String headerImgPath,String cusID)
  { //对字节数组字符串进行Base64解码并生成图片
    if (imgStr == null) //图像数据为空
      return "../picclife/static/custom.png";
    BASE64Decoder decoder = new BASE64Decoder();
    try
    {
      //判断是base64字符串还是图片路径
      if(imgStr.substring(0,5).equals("data:")){
        //Base64解码
        byte[] b = decoder.decodeBuffer(imgStr.substring(imgStr.indexOf(",") + 1));
        for(int i=0;i<b.length;++i)
        {
          if(b[i]<0)
          {//调整异常数据
            b[i]+=256;
          }
        }
        //生成图片
        String imgFilePath = filePath+"/headerImg/"+cusID+".jpg";//新生成的图片
        OutputStream out = new FileOutputStream(imgFilePath);
        out.write(b);
        out.flush();
        out.close();
        return headerImgPath+"headerImg/"+cusID+".jpg";
      }else{
        return imgStr;
      }
    }
    catch (Exception e)
    {
      return "../picclife/static/custom.png";
    }
  }

vue项目base64字符串转图片的实现代码

vue项目base64字符串转图片的实现代码

总结

以上所述是小编给大家介绍的vue项目base64字符串转图片的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
angular 组件通信的几种实现方式
Jul 13 #Javascript
JavaScript实现异步图像上传功能
Jul 12 #Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 #Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 #Javascript
详解node.js的http模块实例演示
Jul 12 #Javascript
Vue中使用的EventBus有生命周期
Jul 12 #Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 #Javascript
You might like
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python之str操作方法(详解)
2017/06/19 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
课程改革实施方案
2014/03/16 职场文书
工业设计专业自荐书
2014/06/05 职场文书
村班子对照检查材料
2014/08/18 职场文书
门球健将观后感
2015/06/16 职场文书
《确定位置》教学反思
2016/02/18 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
导游词之云南丽江古城
2019/09/17 职场文书