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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
json原理分析及实例介绍
Nov 29 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
php session_decode函数用法讲解
2019/05/26 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Python进程间通信Queue实例解析
2018/01/25 Python
降低python版本的操作方法
2020/09/11 Python
python中字符串的编码与解码详析
2020/12/03 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
ajax是什么及其工作原理
2012/02/08 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
实习生自荐信范文
2013/11/13 职场文书
文明教师事迹材料
2014/01/16 职场文书
环保倡议书范文
2014/05/12 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
整改落实自查报告
2014/11/05 职场文书
语文教师个人工作总结
2015/02/06 职场文书
Go语言怎么使用变长参数函数
2022/07/15 Golang