JavaScript 实现base64图片压缩

看如下效果图,第一张是原图,点击Convert按钮后,第二张图显示压缩后的图,可以看到第一张的图的宽度是1600,压缩后图片的宽度是800

 废话少说,直接上代码。

<textarea id="a">
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QB0RXhpZgAATU0AKgAAAAgABAEaAAUAAA//2wBDAQICAgQEBAcEBAcQCwkLEBAQEAUUUUAf//Z
</textarea>
<img id="imga" width="200" height="200" />
<HR>
<button type="button" onclick="convert()">convert</button>
<textarea id="b">
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QB0RX+tD0jMjqn0q5VR/v1mdBFRRRQAUUUUAf//Z
</textarea>
<img id="imgb" width="200" height="200" />
<HR>
<script>
    imga.src = a.innerHTML;
    imgb.src = b.innerHTML;

    function convert() {
        compress(a.innerHTML, 800, 0.5).then(function (val) {
            imgb.src = val;
        });
    }

    function compress(base64String, w, quality) {
        var getMimeType = function (urlData) {
            var arr = urlData.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            // return mime.replace("image/", "");
            return mime;
        };
        var newImage = new Image();
        var imgWidth, imgHeight;

        var promise = new Promise(resolve => newImage.onload = resolve);
        newImage.src = base64String;
        return promise.then(() => {
            imgWidth = newImage.width;
            imgHeight = newImage.height;
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            if (Math.max(imgWidth, imgHeight) > w) {
                if (imgWidth > imgHeight) {
                    canvas.width = w;
                    canvas.height = w * imgHeight / imgWidth;
                } else {
                    canvas.height = w;
                    canvas.width = w * imgWidth / imgHeight;
                }
            } else {
                canvas.width = imgWidth;
                canvas.height = imgHeight;
            }
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
            var base64 = canvas.toDataURL(getMimeType(base64String), quality);
            console.log(base64);
            return base64;
        });
    }
</script>

 

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个示例代码,使用canvas将图片压缩为指定大小,然后将压缩后的base64字符串上传到服务器。 HTML代码: ```html <input type="file" id="file-input"> ``` JavaScript代码: ```javascript // 获取文件输入框元素 const fileInput = document.getElementById('file-input'); // 监听文件输入框变化事件 fileInput.addEventListener('change', () => { // 获取文件对象 const file = fileInput.files[0]; // 创建 FileReader 对象 const reader = new FileReader(); // 读取文件完成事件 reader.addEventListener('load', () => { // 创建图像对象 const img = new Image(); // 图像加载完成事件 img.addEventListener('load', () => { // 创建 canvas 对象 const canvas = document.createElement('canvas'); // 缩放比例 const scale = Math.min(800 / img.width, 800 / img.height); // 设置 canvas 大小 canvas.width = img.width * scale; canvas.height = img.height * scale; // 绘制图像到 canvas 中 const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 将 canvas 转为 base64 字符串 const base64 = canvas.toDataURL('image/jpeg', 0.8); // 发送 base64 字符串到服务器 uploadBase64(base64); }); // 加载图像 img.src = reader.result; }); // 读取文件 reader.readAsDataURL(file); }); // 上传 base64 字符串到服务器 function uploadBase64(base64) { // 发送 AJAX 请求 // ... } ``` 这里使用 canvas 将图片压缩为指定大小,然后将压缩后的 base64 字符串上传到服务器。在实际开发中,还需要根据具体需求进行调整,比如调整压缩比例、设置图片格式、设置上传方式等等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值