HTML5 JS压缩图片并获取图片BASE64编码上传


Posted in Javascript onNovember 16, 2020

本文实例为大家分享了HTML5 JS压缩图片,并获取图片BASE64编码上传的方法,供大家参考,具体内容如下

基本过程

1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象.

2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上.

3) 通过 canvas.toDataURL("image/jpeg", 0.1); 方法, 将图片变成base64字符串, 传入服务端.

var vueImg = new Vue({
  el: "#divCarImages",
  data: { model: { carId: '@carId', imageTitle:'',img64:'' }, images: [] },
  methods: {
   imageHandle: function () {
    var fup = $("#fileImg")[0];

    var img = fup.files[0];

    var image = new Image();
    var canvas = $("#canvas")[0];//document.createElement("canvas");
    var ctx = canvas.getContext('2d');

    image.onload = function () {
     var w = image.naturalWidth,
      h = image.naturalHeight;

     var toSize = 400;
     canvas.width = toSize;
     canvas.height = toSize;

     var w2 = toSize, h2 = toSize;
     if (w > h) {
      h2 = h / w * toSize;
     } else {
      w2 = w / h * toSize;
     }

     ctx.drawImage(image, 0, 0, w, h, 0, 0, w2, h2);
      
    }

    // 判断是否图片
    if (!img) {
     return;
    }

    // 判断图片格式
    if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name))) {
     alert('图片只能是jpg,gif,png');
     return;
    }

    var reader = new FileReader();

    reader.onload = function (e) { // reader onload start
     var url = reader.result;
     image.src = url;

    } // reader onload end

    reader.readAsDataURL(img);
   }

  }
 });
function uploadImg() {
  var canvas = $("#canvas")[0];
  vueImg.model.img64 = canvas.toDataURL("image/jpeg", 0.1);
  //$("#testMsg").html(imgData.length);
      
  // ajax 上传图片
  $.post("@Url.Content("~/AliOss/SaveCarImage")", vueImg.model , function (ret) {

   parseAjaxData(data, function (model) {
    console.log(model.Path);
    alert(model.Path);
    $('#showimg').html('<img src="' + model.Path + '">');
   })  
  }, 'json');
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
js实现表格数据搜索
Aug 09 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 #Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 #Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 #Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 #Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 #Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 #Javascript
Javascript 普通函数和构造函数的区别
Nov 05 #Javascript
You might like
php数组中删除元素的实现代码
2012/06/22 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python设置随机种子实例讲解
2019/09/12 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
pip install命令安装扩展库整理
2021/03/02 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
企业贷款委托书格式
2014/09/12 职场文书
综治工作汇报材料
2014/10/27 职场文书
模范教师事迹材料
2014/12/16 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书