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

2024-03-21 14:55:36

本文实例为大家分享了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');
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

先来几张效果图: 点击其中一张照片可放大,可支持图片文字描述: 同时支持分享功能: 支持手势放大缩小使用js框架是PhotoSwipe. PhotoSwipe是一个图片放大插件,兼容pc和移动端,经历过多个版本的迭代且一直在不断更新,踩过的坑不知凡几,在移动端有着巨大的优势. 1.可控制多种风格如: 标题.分享.全屏按钮,点击事件.是否加入字幕,背景透明等. 2.可支持移动端触摸手势兼容pc端所有的基本手势支持:滑动下一个或上一个,拖动平移.缩放.放大或关闭,点击切换控件,双击放大或缩放.
JavaScript实现HTML5游戏断线自动重连的方法

断线重连的需求一断线重连原理二游戏内自动重连不刷新三刷新游戏自动重连重连数据Locationreplace重置url重连四实际项目中处理重连机制最后的总结断线重连的需求尤其是手机上,会因为网络的不稳定或者其他原因,导致用户的socket链接断开.这个时候如果直接让玩家退出游戏,重新登录,无疑是非常影响用户体验的事情.所以根据这个需求,就有需要程序来实现断线后自动重连回去的技术,是用户能够再次快速开始游戏进行战斗. 一.断线重连原理原来其实很简单,就是在断线的时候,根据用户的点击(有些时间短的
js浏览器html5表单验证

html5表单添加了很多类型的表单,而且还自带验证的功能.在移动端,手机等设备能够根据不同的input类型弹出不同的键盘,例如iphone弹的键盘但是由于不同的浏览器对不合法输入提示文案不一致,样式也不一样,并且老的浏览器不兼容(IE9及以下),导致了在生产环境中比较少见到.例如对于邮箱格式的检验,不同浏览器的效果如下: Chrome Firefox IE safari html5的表单跨浏览器有很大的问题具体来说存在三个问题: (1) 输入框blur的时候不会触发检查,只有在点提交时才触发
js HTML5上传示例代码完整版

本身用flash插件一直上传,但是有很多场景不兼容,有些核心配置改不了,终于整理好了一个HTML5的版本,下面有传送门: 解决了几个客户需要的几个主要问题: 可多文件选择,有特效不死板自定义提交参数文件大小数量限制 *MD5校验服务器反馈信息展示可控制上传顺序多视图切换这里还是申明一下插件核心组件出处CFUpdate (0.8.2 Base) HTML5 批量上传组件 HTML5版本,只要支持HTML5的浏览器都可以正常使用,并对触摸屏(手机,平板)进行了优化 IE9+ Firefo
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】

本文实例讲述了JS+HTML5实现的前端购物车功能插件.分享给大家供大家参考,具体如下: 最近做一个商城,需要用到一个简答的购物车功能,当然,后端实现比较容易,,这里重点还是讲一下前端的JS插件. 从源代码里面没看出来,它叫啥,好像叫:ctshop .js,不管啦,反正我提供下载就好,我做了一些简单的修复,支持了中文这个插件使用了HTML5的新特效:storage ,就是游览器数据库的功能,这跟之前把数据存在cookies里面原理是相识的,这样的好处在于用户刷新页面,数据还在,,又不需要跟后端
HTML5 JS压缩图片并获取图片BASE64编码上传

本文实例为大家分享了HTML5 JS压缩图片,并获取图片BASE64编码上传的方法,供大家参考,具体内容如下基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上. 3) 通过 c
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了,如果不加,就无法同时选择多张图片,于是我就照实跟同事说了这个情况.但回头一想,单张图片可以上传,那多张图片呢?于是就有了本文的内容. HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文
python将图片文件转换成base64编码的方法

本文实例讲述了python将图片文件转换成base64编码的方法.分享给大家供大家参考.具体实现方法如下: import base64 f=open(r'c:\jb51.gif','rb') #二进制方式打开图文件 ls_f=base64.b64encode(f.read()) #读取文件内容,转换为base64编码 f.close() 调用方法如下: 复制代码代码如下: <img src="R0lGODlh1wBOAPcAAAAAAP///7a4u+jq7bG1ucrN0N7g4tLU
Struts2中图片以base64方式上传至数据库

1.页面这里输入代码 <div> <span id="uploadImg" style="margin:50px;background-color:#ddd;display:inline-block;height:130px;width:200px;"> <span style="color:#bbb;font-weight:600;border:2px #ccc dashed;font-size:20px;text-ali
JS使用base64格式上传文件

本文实例为大家分享了JS使用base64格式上传文件的具体代码,供大家参考,具体内容如下 html页面 <input type="file" id="fielinput" /> <img id="txshow" style="width:100px;height:100px;"/> <br/>解析之后的base64数据:<br/> <p id="data"
教你3分钟利用原生js实现有进度监听的文件上传预览组件

前言本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,该组件利用FileReader来实现文件在前端的解析,预览,读取进度等功能,并对外暴露相应api来实现用户自定义的需求,比如文件上传,进度监听,自定义样式,读取成功回调等. 组件设计架构如下: 涉及的核心知识点如下: 闭包:减少变量污染,缩短变量查找范围自执行函数 file API:对文件进行读取,解析,监控文件事件 DocumentFragment API:主要用来优化dom操作 minix :用来实现对象混合
SpringBoot 二维码生成base64并上传OSS的实现示例

目录基础环境代码实现 1.添加依赖 2.工具类 3.测试生成 4.base64 转换为图片在线工具 5.base64图片上传oss 基础环境 SpringBoot.Maven 代码实现 1.添加依赖  <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>3.3.3<
javascript实现获取指定精度的上传文件的大小简单实例

js实现获取指定精度的上传文件的大小,主要采用html和JavaScript,用浏览器运行下述代码,按照操作:选择文件->获得文件大小的顺序,即可. 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获得文件大小</title> </head> <body> <f
js和jquery如何获取图片真实的宽度和高度

1.什么时候需要获取图片真实的宽度和高度在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法 1)给所有的图片加上这样的样式 1 复制代码代码如下: .news img{margin:5px auto; display:block;width:100%; height:auto;} 但是这种方式有另外
解决.net项目中上传的图片或者文件太大无法上传问题

最近做项目的时候用户提出要上传大图片一张图片有可能十几兆本来用的第三方的上传控件有限制图片上传大小的设置以前设置的是2M 按照用户的要求以为直接将限制图片上传大小的设置改下就可以了但是当上传大图片的时总是异常: 错误消息:超过了最大请求长度解决方案: 错误原因:asp.net默认最大上传文件大小为4M,运行超时时间为90S. 修改web.config中配置 <configuration> <system.web> <httpRuntime us

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

相关推荐

随机推荐