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 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
Jquery api 速查表分享
Jan 12 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 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牛逼的面试题分享
2013/01/18 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
javascript实现动态标签云
2015/10/16 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
python实现随机漫步方法和原理
2019/06/10 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
冰淇淋店的创业计划书
2014/02/07 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
社区矫正工作方案
2014/06/04 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
党支部书记岗位职责
2015/02/15 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript