input file选择图片回显并压缩体积

html:
<input type="file"  accept="image/*" class="filesBtn" id="addWgBtn" name="outPhotos">

js:
$("#addWgBtn").change(function (e) {
        var files = this.files
        if (files) {
            for (var i = 0; i < files.length; i++) {
                $('.add-wgt').before(
                    '<div class="tr-photo fl" >' +
                    '   <img src="' + URL.createObjectURL(files[i]) + '" alt="">' +
                    '   <span class="btn-del"></span>' +
                    '</div>'
                );
                compressImage(files[i], file => {//压缩
                  console.log(file) //压缩后的图片
                }, "");
            }
        }
        $("#addWgBtn").val("")
    })

    // 压缩图片压缩图片压缩图片压缩图片压缩图片压缩图片压缩图片压缩图片
    compressImage = (file, success, error) => {
        // 图片小于1M不压缩
        if (file.size < Math.pow(1024, 2)) {
            return success(file);
        }

        const name = file.name; //文件名
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = e => {
            const src = e.target.result;

            const img = new Image();
            img.src = src;
            img.onload = e => {
                const w = img.width;
                const h = img.height;
                const quality = 0.2; // 默认图片质量为0.92
                // 生成canvas
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                // 创建属性节点
                const anw = document.createAttribute("width");
                anw.nodeValue = w;
                const anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);

                // 铺底色 PNG转JPEG时透明区域会变黑色
                ctx.fillStyle = "#fff";
                ctx.fillRect(0, 0, w, h);

                ctx.drawImage(img, 0, 0, w, h);
                // quality值越小,所绘制出的图像越模糊
                const base64 = canvas.toDataURL('image/jpeg', quality); // 图片格式jpeg或webp可以选0-1质量区间

                // 返回base64转blob的值
                // console.log(`原图${(src.length / 1024).toFixed(2)}kb`, `新图${(base64.length / 1024).toFixed(2)}kb`);
                // 去掉url的头,并转换为byte
                const bytes = window.atob(base64.split(',')[1]);
                // 处理异常,将ascii码小于0的转换为大于0
                const ab = new ArrayBuffer(bytes.length);
                const ia = new Uint8Array(ab);
                for (let i = 0; i < bytes.length; i++) {
                    ia[i] = bytes.charCodeAt(i);
                }
                file = new Blob([ab], {
                    type: 'image/jpeg'
                });
                file.name = name;

                success(file);
            }
            img.onerror = e => {
                error(e);
            }
        }
        reader.onerror = e => {
            error(e);
        }
    }


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现图片上传并回显,可以使用HTML的<input type="file">标签和JavaScript来完成。 首先需要在HTML中添加一个文件上传表单,代码如下: ```html <form> <input type="file" id="inputImage" accept="image/*"> </form> ``` 注意,这里设置了accept属性为"image/*",表示只允许上传图片文件。 接下来,添加JavaScript代码来实现上传和回显功能。代码如下: ```javascript const inputImage = document.getElementById("inputImage"); inputImage.addEventListener("change", function() { const file = inputImage.files[0]; const reader = new FileReader(); reader.addEventListener("load", function() { // 将图片显示在页面上 const img = document.createElement("img"); img.src = reader.result; document.body.appendChild(img); }); if (file) { reader.readAsDataURL(file); } }); ``` 这段代码通过事件监听器来监听文件上传表单的变化。当文件发生变化时,获取上传的文件,并使用FileReader来读取文件内容。最后将图片显示在页面上。 注意,这里使用了FileReader对象的readAsDataURL()方法,该方法可以将文件内容读取成一个Base64编码的字符串,以便将其显示在<img>标签中。 完整的示例代码如下: ```html <!DOCTYPE html> <html> <head> <title>图片上传回显</title> </head> <body> <form> <input type="file" id="inputImage" accept="image/*"> </form> <script> const inputImage = document.getElementById("inputImage"); inputImage.addEventListener("change", function() { const file = inputImage.files[0]; const reader = new FileReader(); reader.addEventListener("load", function() { // 将图片显示在页面上 const img = document.createElement("img"); img.src = reader.result; document.body.appendChild(img); }); if (file) { reader.readAsDataURL(file); } }); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值