上传sb3文件,通过获取首帧来判断是否为sb3文件并获取首帧作为封面图

做的一个是有关少儿编程的项目,甲方的需求是通过获取首帧来判断是否是sb3文件,而不是通过后缀名来判断的,以防别人改后缀名来上传文件

  1. 在main.js引入,在展示sb3文件的时候也会用到
    在这里插入图片描述
//安装
"scratch-vm": "0.2.0-prerelease.20191119203901",
 
"scratch-render": "0.1.0-prerelease.20191126210304",
 
"scratch-storage": "1.3.2",
 
"scratch-svg-renderer": "0.2.0-prerelease.20191104164753",
 
"scratch-audio": "0.1.0-prerelease.20190925183642",
 
"twgl.js": "4.4.0"
 <el-form-item label="sb3文件" prop="file">
        <div class="documnet">
          <div style="corsor: pointer !important">
            <div class="input-button">
              上传文件
              <input
                type="file"
                id="file"
                name="file"
                @input="change"
                style="
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  opacity: 0;
                  cursor: pointer;
                "
              />
            </div>
            <div class="namefile" v-if="ruleForm.file">
              <span> {{ namefile }} </span>
              <!-- <span
                class="fileicon el-icon-circle-close"
                @click="deletefile()"
              ></span> -->
            </div>
          </div>
        </div>
      </el-form-item>
//使用canvas展示上传的sb3文件
 <canvas id="test" width="480" height="360" v-show="false"></canvas>
 //展示首帧图片
    <img
      src=""
      alt=""
      id="thumbnail"
      width="240px"
      height="180px"
      border="2px"
      v-show="false"
    />
 change(e1) {
      this.downLength = true;
      var that = this;
      var canvas = document.getElementById("test");
      var render = new this.ScratchRender(canvas);
      var vm = this.initVM(render);
      const fileInput = document.getElementById("file");
      const loadFile = this.loadFileInputIntoVM.bind(
        null,
        fileInput,
        vm,
        render
      );
      loadFile().then(() => {
        render.draw();
        const reader = new FileReader();
        const base64Data = canvas.toDataURL("image/jpeg", 0.7);
        const blob = this.dataURItoBlob(base64Data);
        reader.onload = function (e) {
          const img = document.getElementById("thumbnail");
          img.src = e.target.result;
          console.log(e.target.result);
          //获取到的是base64格式
          const files = that.base64toFile(e.target.result);
          console.log(files);
          //通过formData来提交sb3文件
          const formdata2 = new window.FormData();
          formdata2.append("type", "user");
          formdata2.append("file", e1.target.files[0]);
          that.$api
            .uploadFile(formdata2)
            .then((res) => {
              if (res.code == 10000) {
                that.ruleForm.file = res.data.oss_url;
                that.namefile = res.data.name;
                that.downLength = false;
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((err) => {
              that.$message.error(err.message);
            });
            //图片通过formData提交
          const formdata1 = new window.FormData();
          formdata1.append("type", "user");
          formdata1.append("image", files);
          that.$api
            .uploadImg(formdata1)
            .then((res) => {
              if (res.code == 10000) {
                that.ruleForm.cover = res.data.oss_url;
                that.isshowtrue = true;
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((err) => {
              that.$message.error(err.message);
            });
        };
        reader.readAsDataURL(blob);
      });
    },
 dataURItoBlob(base64Data) {
      let byteString;
      if (base64Data.split(",")[0].indexOf("base64") >= 0)
        byteString = atob(base64Data.split(",")[1]);
      else byteString = unescape(base64Data.split(",")[1]);
      const mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];
      const ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], { type: mimeString });
    },
   loadFileInputIntoVM(fileInput, vm, render) {
      const reader = new FileReader();
      return new Promise((resolve) => {
        reader.onload = () => {
          vm.start();
          console.log(reader.result);
          vm.loadProject(reader.result)
            .then(() => this.waitForSVGSkinLoad(render))
            .then(() => {
              resolve();
            })
            .catch(() => {
            //捕获到首帧不是sb3文件
              this.namefile = "";
              this.ruleForm.file = "";
              this.ruleForm.cover = "";
              this.isshowtrue = false;
              this.downLength = false;
              this.$message.error("请上传sb3文件");
              console.log("please upload corract sb3 file");
            });
        };
        console.log(fileInput.files[0]);
        reader.readAsArrayBuffer(fileInput.files[0]);
      });
    },
    initVM(render) {
      const vm = new VirtualMachine();
      const storage = new this.ScratchStorage();
      vm.attachStorage(storage);
      vm.attachRenderer(render);
      vm.attachV2SVGAdapter(new this.ScratchSVGRenderer.SVGRenderer());
      vm.attachV2BitmapAdapter(new this.ScratchSVGRenderer.BitmapAdapter());
      return vm;
    },
   base64toFile(dataurl, filename = "file") {
      let arr = dataurl.split(",");

      let mime = arr[0].match(/:(.*?);/)[1];

      let suffix = mime.split("/")[1];

      let bstr = atob(arr[1]);

      let n = bstr.length;

      let u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }

      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值