1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 利用H5Canvas进行前端图片压缩再上传笔记

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

时间:2023-01-09 08:52:48

相关推荐

利用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;}pressImg(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);});pressImg = 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"]));?>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。