当前位置:首页 > VUE > 正文内容

vue用cavans图片压缩并上传

陈杰5个月前 (11-04)VUE315
      //vue压缩图片上传

      yasuo() {
        let that = this
        let file = that.imgUrls
        uni.getImageInfo({
          src: file.path,
          success: function(res) {
            let canvasWidth = res.width //图片原始长宽
            let canvasHeight = res.height;
            let base = canvasWidth / canvasHeight;
            if (canvasWidth > 500) {
              canvasWidth = 500;
              canvasHeight = Math.floor(canvasWidth / base);
            }
            let img = new Image();
            img.src = file.path; // 要压缩的图片
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;

            // 将图片画到canvas上面 使用Canvas压缩
            ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
            canvas.toBlob(function(fileSrc) {
              let imgSrc = window.URL.createObjectURL(fileSrc); //原生JS生成文件路径
              uni.downloadFile({
                url: imgSrc, //仅为示例,并非真实的资源
                success: (resFilePath) => {
                  console.log(resFilePath);
                  if (resFilePath.statusCode === 200) {
                    //resolve(resFilePath);
                    that.imageYasuo = resFilePath
                  }
                }
              });
            });
          },
        })
      }


扫描二维码至手机访问

扫描二维码推送至手机访问。

版权声明:本文由何烦过虎溪发布,如需转载请注明出处。

转载请注明出处:http://95shouyou.com/?id=8

分享给朋友:

相关文章

javascript判断当前用户环境是pc端还是手机端

有一个项目因为是用的uniapp开发,因为项目比较早,之前uniapp的电脑端展示不是太友好,所以在电脑端用了一个iframe来包裹网站。现在这个项目需要二次开发,目的是摄像头转直播功能,项目完成了后...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。