短视频开发 微信小程序实战教程 angularjs powershell github laravel4 vue下载 jquery解析json数据 mysql修改字段值 新手学c还是java matlab中如何定义函数 matlab取实部 手动安装fastboot驱动 kubernetes视频教程 python中time python匹配字符串 java运算符 java写文件 java读取文件 java日期格式化 php实例 corelpainter 销售单打印软件 迷你版kms 虚拟打印机安装 p6软件 win10环境变量 文字转语音工具 电脑代码雨 开源即时通讯软件 kmplayer绿色版 计算机科学概论 onaccuracychanged dnf选择角色卡死 php上传文件 mysql定时备份 vue搭建项目 cdr如何做立体字 图片格式太大怎么变小 upnp阻塞
当前位置: 首页 > 学习教程  > 编程语言

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

2020/7/24 10:27:51 文章标签:

最近公司在做小程序直播,需要在公司后台添加直播商品,创建商品有要求 要求图片的尺寸是 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的图片了
              //let base64 = e.target.result;
            };
            oFileReader.readAsDataURL(blob);
            // 将base64的图片 压缩  并裁剪
            let src = window.URL.createObjectURL(blob);
            let canvas = document.createElement('canvas');
            canvas.width = 320;   //这里用的尺寸 是因为上架图片是按这个比例来的
            canvas.height = 200;
            let ctx = canvas.getContext('2d');
            let img = new Image();
            img.src = src;
            img.onload = () => {
              ctx.drawImage(img, 0, 0, 320, 200);  //在canvas里面画图  尺寸是320*200
              let type = 'image/jpeg';
              let dataurl = canvas.toDataURL(type);
              let canvas2 = document.createElement('canvas');
              canvas2.width = 200;
              canvas2.height = 200;
              let cxt2 = canvas2.getContext("2d");
                //裁剪图片 裁剪的尺寸是200*200
              let dataImg = ctx.getImageData(60, 0, 200, 200);  
              cxt2.putImageData(dataImg, 0, 0);
              //将canvas元素中的图像转变为DataURL
              let data_url = canvas2.toDataURL(type);
              callback(data_url)
            }
          }
        };
        xhr.send();
      },
getBase64() 里面将图片转为base64  并且利用canvas进行了压缩和裁剪

压缩比例可以根据自己的图片计算出来  我这里使用width:320  height:200  是因为 我的产品图片就是这个比例8:5

我需要的图片是200*200  所以height定义200

裁剪时  ctx.getImageData(60, 0, 200, 200);  裁取中间部分 320-200 =120  / 2 = 60  起点为60,0 ;

getBase64()  带有回调  返回的是裁剪好的base64图片

//使用getBase64()

 getCanvasImage: function (image) {
    
   this.getBase64(image.url, (base64) => {  //base64就是裁剪好的图片

       let file = this.dataURLtoFile(base64, image.name);  //将base64转为file文件

       let formData = this.getFormData(file);  //将file转formData 之后就可以提交了
       
    });
},

 //将base64转换为文件
dataURLtoFile: function (dataurl, filename) {
   var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
   bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
   while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
   }
  return new File([u8arr], filename, {type: mime});
},

getFormData: function (file) {
    let formData = new FormData();
    formData.append("media", file, "file_" + Date.parse(new Date()) + file.name);
    formData.append('type', "image");
    return formData;
},

实际项目中并没有在转file后就直接提交  而是将file保存下来 将base64转为图片显示在了页面上面 

当用户切换产品时   图片显示不同产品的图片 

用户最后点击确定时才将最后选中的产品图片file 转formData进行提交 并创建商品


本文链接: http://www.dtmao.cc/news_show_50282.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?