HTML5+Canvas实现本地压缩上传图片功能

青旅半醒 2022-08-13 12:42 206阅读 0赞

很多网站客户在上传产品的时候，对图片大小没概念，一张图片4-5兆也直接往上传，所以现在想让图片在本地压缩后再上传到网站上去。网上找的相关程序，程序源码如下：

$(':file').on('change',function(){
            var file = this.files[0];
            var url = webkitURL.createObjectURL(file);
    
            /* 生成图片
            * ---------------------- */
            var $img = new Image();
            $img.onload = function() {
    
                //生成比例
                var width = $img.width,
                        height = $img.height,
                        scale = width / height;
                width = parseInt(800);
                height = parseInt(width / scale);
    
                //生成canvas
                var $canvas = $('#canvas');
                var ctx = $canvas[0].getContext('2d');
                $canvas.attr({width : width, height : height});
                ctx.drawImage($img, 0, 0, width, height);
                var base64 = $canvas[0].toDataURL('image/jpeg',0.5);
    
                //发送到服务端
                $.post('upload.php',{formFile : base64.substr(22) },function(data){
                    $('#php').html(data);
                });
    
            }
            $img.src = url;
    
        });</script>

检查文件上传表单域，如果选择了文件则自动进行压缩， upload.php 实现上传。

本文转载自 深圳市乐道网络科技(www.ledaokj.com) 详文参考：http://www.ledaokj.com/a-wlyx/176/718.html

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5图片压缩上传

1、图片上传过慢，图片进行压缩上传 ![1021765-20190706163117700-599513873.png][] <div class="form-it

偏执的太偏执、/ 2023年08月17日 15:47/ 0 赞/ 146 阅读

相关 Spring 使用七牛云存储上传图片以及html5图片压缩上传

需求：最近在做项目的时候采用了多模块的方案前台是一个系统后台是另一个系统在做图片上传的时候有个问题如果想之前那样前台系统的图片保存的自己的web应用目录下

妖狐艹你老母/ 2022年10月01日 01:51/ 0 赞/ 256 阅读

相关 HTML5 本地裁剪图片并上传至服务器

很多情况下用户上传的图片都需要经过裁剪，比如头像啊什么的。但以前实现这类需求都很复杂，往往需要先把图片上传到服务器，然后返回给用户，让用户确定裁剪坐标，发送给服务器，服务器裁剪

落日映苍穹つ/ 2022年08月18日 11:45/ 0 赞/ 206 阅读

相关 HTML5+Canvas实现本地压缩上传图片功能

很多网站客户在上传产品的时候，对图片大小没概念，一张图片4-5兆也直接往上传，所以现在想让图片在本地压缩后再上传到网站上去。网上找的相关程序，程序源码如下： $(':

青旅半醒/ 2022年08月13日 12:42/ 0 赞/ 207 阅读

相关 html5压缩图片并上传

手机端图片有很大的，上传的时候很慢，这时候就要压缩一下了，有一个开源的js可以压缩图片的大小，开源地址如下：[https://github.com/think2011/loca

阳光穿透心脏的1/2处/ 2022年08月04日 12:59/ 0 赞/ 250 阅读

相关使用spring mvc+localResizeIMG实现HTML5端图片压缩上传

第一步：下载localResizeIMG localResizeIMG放在github中的，地址是：[https://github.com/think2011/localRe

淩亂°似流年/ 2022年06月02日 00:37/ 0 赞/ 203 阅读

相关关于图片上传和利用canvas进行压缩

之前开发多页面应用时，用的是jQ插件。现在，使用的是vue采用单页面模式，那么怎么上传呢？用的相关技术是前端 1.input file控件

梦里梦外;/ 2022年05月31日 14:16/ 0 赞/ 224 阅读

相关 HTML5+canvas实现图片的压缩上传

1.图片上传输入框 <input type="file" name="" class="fileUpload" accept="image/" capture="ca

╰+攻爆jí腚メ/ 2022年05月24日 10:24/ 0 赞/ 237 阅读

相关 angular7中实现图片上传、图片压缩、图片裁剪功能

file-upload.service.ts import { Injectable } from '@angular/core'; import { Htt

喜欢ヅ旅行/ 2022年01月28日 00:15/ 0 赞/ 727 阅读

相关 uni-app h5 上传图片压缩图片

由于uni-app h5 不支持sizeType，如果需要压缩图片就只能自己去实现了。 1. 选择图片： uni.chooseImage({ co

谁践踏了优雅/ 2021年11月05日 14:58/ 0 赞/ 1486 阅读