利用H5Canvas进行前端图片压缩再上传笔记

前端代码如下：

//---------------------压缩图片上传插件---------------------------
var ImgFileGet_class = function(msg){this.fileSelector = msg.fileSelector;  //file-input的选择器this.preViewImgSelector = msg.preViewImgSelector;  //图片预览选择器this.max_size = msg.max_size || false;  //图片最大大小，不设为无限度this.ajaxInterace = msg.ajaxInterace; //ajax上传图片插件var _this = this;$(this.fileSelector).change(function(){var reader = new FileReader();var file = this.files[0];reader.onload = function(e){var com_rate = 1;if((_this.max_size!==false) && (file.size>_this.max_size)){com_rate =  _this.max_size/file.size;}_this.compressImg(e.target.result,com_rate,function(src_data){_this.preViewImgSelector && $(_this.preViewImgSelector).attr('src',src_data);if(_this.ajaxInterace){_this.ajaxInterace(src_data);}});}reader.readAsDataURL(file);});this.compressImg = function(imgData,com_rate,onCompress){if(!imgData)return;onCompress = onCompress || function(){};com_rate = com_rate || 1;//压缩比率默认为1var img = new Image();img.onload = function(){ if(com_rate!=1) {//按最大高度等比缩放var rate = Math.sqrt(com_rate);img.width  *= rate; img.height *= rate; }var canvas = document.createElement('canvas');var ctx = canvas.getContext("2d"); canvas.width =  img.width; canvas.height = img.height; //ctx.drawImage(img, 0, 0);ctx.clearRect(0, 0, canvas.width, canvas.height); // canvas清屏//重置canvans宽高 canvas.width = img.width; canvas.height = img.height;ctx.drawImage(img, 0, 0, img.width, img.height); // 将图像绘制到canvas上 onCompress(canvas.toDataURL("image/jpeg"));//必须等压缩完才读取canvas值，否则canvas内容是黑帆布};//记住必须先绑定事件，才能设置src属性，否则img没内容可以画到canvasimg.src = imgData;}
}var ImgFileGet = new ImgFileGet_class({fileSelector:"#file-in",  //fileInput选择器preViewImgSelector:"#pre-img",  //预览图片max_size:200*1024,ajaxInterace:function(src_data){var cont_index = src_data.indexOf("base64,")+7;  //base64编码的图片，类型为jpegvar send_msg = {};send_msg.content = src_data.substring(cont_index);$.ajax({url:'http://.../save_data.php',type:'POST',data: send_msg,success:function(ret){}},'json');}
});

后端php代码如下：

<?php$img = base64_decode($_POST['content']);file_put_contents("test.jpg", $img);die(json_encode(['code'=>0,"msg"=>"end"]));
?>

利用H5Canvas进行前端图片压缩再上传笔记相关推荐

js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传图片上传目录 js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传 html代码 js代码 html代码 <input type ...
移动前端—H5实现图片先压缩再上传
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
前端获取图片压缩后上传给后台
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
Bmob+Luban（鲁班）压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
返回图片_Vue 图片压缩并上传至服务器
日常开发中经常会遇到上传图片的需求,随着手机的蓬勃发展,现在拍出来的照片分辨率越来越高,随之带来的问题就是图片占用空间越来越大,如果我们直接上传图片可能就会浪费很大一笔资源,本文主要讲解基于 Vue ...
Vue 图片压缩并上传至服务器
本文主要讲解基于 Vue + Vant ,实现移动端图片选择,并用 Canvas 压缩图片,最后上传至服务器.还会封装一个工具类,方便直接调用. 一.工具类封装废话不多说先上代码,封装一个 Comp ...
js图片压缩java上传,JS实现异步上传压缩图片
摘要: 使用iframe来处理异步上传图片,在现在这个时代来说,多多少少都有点落后了!单单就凭AJAX和JS就不能做到异步上传图片了吗? 先看调用页面: 选择图片 var img; $("i ...
android 快速实现图片压缩与上传
由于最近项目更新功能比较的忙,也没时间去整理自己的知识点和管理自己的博客.在android对手机相册中的图片的压缩和上传到服务器上,这样的功能在每个app开发中都会有这样的需求.所以今天就对andro ...
jqWEUI对图片压缩并上传
jqWEUI样式,加图片上传到页面并预览 ------------------------------------------------- 补充:增加了图片压缩js 2018年6月29日 ---- ...

利用H5Canvas进行前端图片压缩再上传笔记

利用H5Canvas进行前端图片压缩再上传笔记相关推荐

最新文章

热门文章