文件大小判断图片压缩上传拍照 blob转base64 分段 base64转blob canvas图片处理

web修理工

已于 2022-05-14 10:04:38 修改

阅读量247

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html5

于 2020-06-22 17:06:40 首次发布

本文链接：https://blog.csdn.net/qq_42374676/article/details/106905640

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

 <input
          multiple="multiple"
          type="file"
          accept="image/*"
          @change="upImage"
          class="input-avatar"
        />
 // 图片
    upImage(e) {
      let file = e.target.files[0];
      // this.folderList.imgfile = file;
      let fileSize = file.size / 1024 / 1024;
      if (fileSize > 0) {
        let reader = new FileReader();

        reader.onload = f => {
          console.log(f, "f");
          let content = f.target.result; //图片的src，base64格式
          let img = new Image();
          img.src = content;
          img.onload = () => {
            //图片加载完毕
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext("2d");
            let initSize = img.src.length;
            let width = img.width;
            let height = img.height;
            canvas.width = width;
            canvas.height = height;
            //downloadedImg.crossOrigin = "Anonymous"; 图片跨域处理
            ctx.drawImage(img, 0, 0, width, height);
            let dataURL = canvas.toDataURL("image/jpeg", 0.1);
            let blob = base64ToBlob(dataURL);
              this.folderList.imgfile=blob
            // let formData = new FormData();
            
             //   var blob1 = blob1.slice(0,3); 分割图片
            //   var blob2 = blob1.slice(0,3); 分割图片  
            
            // formData.append("file", blob, file.name);
            // console.log(formData, "formData");
            // this.folderList.imgfile = formData;
            this.imagtype = 1;
            this.upfile();

            function base64ToBlob(code) {
              let parts = code.split(";base64,");
              let contentType = parts[0].split(":")[1];
              let raw = window.atob(parts[1]);
              let rawLength = raw.length;

              let uInt8Array = new Uint8Array(rawLength);

              for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
              }
              return new Blob([uInt8Array], { type: contentType });
            }
          };
        };
        reader.readAsDataURL(file);
      }
    },

canvas 图片转化


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body><script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]></script>

    <video id="video" prepend controls="controls">
        <source src="./1.mp4" />
    </video>
    <button id="capture">Capture</button>
    <div id="output"></div>

    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <script>
        (function () {
            "use strict";
            var video, $output;
            var scale = 1;
            var initialize = function () {
                $output = $("#output");
                video = $("#video").get(0);
                $("#capture").click(captureImage);
            };
            var captureImage = function () {
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth * scale;
                canvas.height = video.videoHeight * scale;
                canvas.getContext('2d')
                    .drawImage(video, 0, 0, canvas.width, canvas.height);
                var img = document.createElement("img");
                // img.src = canvas.toDataURL('image/png');
                canvas.toBlob(function (blob) {//blob将base64编码的src 以二进制的形式存进了 Blob对象
                    img.src = window.URL.createObjectURL(blob)
                    // $('img').attr('src',HTMLMediaElement.srcObject(blob))//这个方法是MDN说会替代上面的方法 但是我在浏览器中使用还不支持（什么鬼？？？）
                    // 图片ajax上传-》将blob二进制数据上传上去
                    console.log(blob)




                }, 'image/png');
                $output.prepend(img);
            };
            $(initialize);
        }());
    </script>
</body>

</html>

web修理工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
文件大小判断图片压缩上传拍照 blob转base64 分段 base64转blob canvas图片处理

// 图片 upImage(e) { let file = e.target.files[0]; // this.folderList.imgfile = file; let fileSize = file.size / 1024 / 1024; if (fileSize > 0) { let reader = new FileReader(); reader.onload = f => { .
复制链接

扫一扫