js 获取网络图片压缩裁剪并上传

原创

于 2020-07-24 10:22:15 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

在小程序直播项目中，由于商品图片需为1:1尺寸，本文介绍了如何通过JavaScript将非1:1比例的大图转换成压缩并裁剪后的200x200图片。首先将商品图片URL转为base64，接着设定压缩比例，裁剪图片的中间部分，最后将base64转换为file对象用于上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司在做小程序直播，需要在公司后台添加直播商品，创建商品有要求要求图片的尺寸是 1：1的。

公司有上千种产品准备是让运营人员直接选择商品将需要的资料自动添加进去点击确定就行

公司产品都是有商品图片的但是图片的尺寸不是1：1 而且图片都是大图，所以需要将图片进行压缩后裁剪再上传

下面开始了：点击【选择】按钮后

1.将当前商品图片的url 转base64 ; 为什么要转呢因为直接用url,toDataURL() 和putImageData()会报跨域错误

getBase64: function (imgUrl, callback) {
        window.URL = window.URL || window.webkitURL;
        let xhr = new XMLHttpRequest();
        xhr.open("get", imgUrl, true);
        // 至关重要
        xhr.responseType = "blob";
        xhr.onload = function () {
          if (this.status == 200) {
            //得到一个blob对象
            let blob = this.response;
            console.log("blob", blob)
            // 至关重要
            let oFileReader = new FileReader();
            oFileReader.onloadend = function (e) {
              // 此处拿到的已经是 base64的图片了