scratch-ui使用自己资源文件

scratch-ui从官方git下载启动之后，角色和舞台背景图片资源都无法加载，因为scratch的资源使用的是cdn服务器，而且cdn服务器h国内被墙了，要想办法解决这些资源的问题

资源的路径形如：static/assets/de6a2ca491eb20b2b669e732e84ce7af.png

具体的全路径如：https://cdn.assets.scratch.mit.edu/internalapi/asset/0015433a406a53f00b792424b823268c.png/get

从思路上来说，使用一个爬虫把这些图片爬下来就可以了

1.获取scratch所有的资源路径名称

2.爬虫所有的资源文件

3.修改scratch资源路径到自己的资源路径

一.获取scratch所有的资源路径名称

1在scratch-guisrcliblibraries目录下有四个*.json文件里面记录了资源的配置信息

1.sprites.json

2,sounds.json

3.costumes.json

4.backdrops.json

二.爬虫所有的资源文件

参考这里，有一个朋友写了一个python脚本来爬虫所有的资源（需要FQ）

三.修改scratch资源路径到自己的资源路径

1.资源url分析

对于选择舞台背景时候弹出的多个预览背景图片，每个图片的地址格式是：https://cdn.assets.scratch.mit.edu/internalapi/asset/d3344650f594bcecdf46aa4a9441badd.svg/get/

选定了背景后再把背景图片再加载到舞台上的时，使用图片的地址格式是:https://assets.scratch.mit.edu/internalapi/asset/d3344650f594bcecdf46aa4a9441badd.svg/get/

前者url比后者url多了一个cdn

上面是背景的研究，对于角色造型和声音的资源也是一样的，所以说对于静态资源

预览的缩略图地址格式是：https://cdn.assets.scratch.mit.edu/internalapi/asset/{MD5}.svg/get/

选中以后实际资源地址是：https://assets.scratch.mit.edu/internalapi/asset/{MD5}.svg/get/

结论：

缩略图地址和选中后的资源地址不一样，两个cdn服务器，内容都是一样的，为什么？

 2.找到scratch-ui中加载资源的代码

在vscode中整个项目搜索关键字"assets.scratch.mit.edu"，可以搜到两个.jsx文件，srccontainerslibrary-item.jsx和srclibproject-fetcher-hoc.jsx

srccontainerslibrary-item.jsx代码在line：109

    render () {
        const iconMd5 = this.curIconMd5();
        const iconURL = iconMd5 ?
            `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
            this.props.iconRawURL;
        return (
            <LibraryItemComponent
                bluetoothRequired={this.props.bluetoothRequired}
                ...
      }

srclibproject-fetcher-hoc.jsx代码在line:133

    ProjectFetcherComponent.defaultProps = {
        assetHost: 'https://assets.scratch.mit.edu',
        projectHost: 'https://projects.scratch.mit.edu'
    };

3. 写一个服务提供资源服务

const express = require("express");
const path = require("path");
const fs = require("fs");

const app = express();

app.get("*", function (req, res, next) {
  //设置跨域访问
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", " 3.2.1");
  res.header("Content-Type", "application/json;charset=utf-8");

  next();
});

app.get("/internalapi/asset/*/get/", function (req, res) {
  let url = req.url.replace("/get/", "");
  file = path.join(process.cwd(), url);
  if (fs.existsSync(file)) {
    res.sendFile(file);
  } else {
    res.end("no file " + url);
  }
});

const port = 8603;
app.listen(port, function () {
  console.log("sever listen to : " + port);
});

也修改scratch-ui中两个地方对应的的资源路径

首先，srccontainerslibrary-item.jsx中

    render () {
        const iconMd5 = this.curIconMd5();
        const iconURL = iconMd5 ?
            // `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
            `http://localhost:8603/internalapi/asset/${iconMd5}/get/` :
            this.props.iconRawURL;
        return (
            <LibraryItemComponent
        ...

其次，srclibproject-fetcher-hoc.jsx中

    ProjectFetcherComponent.defaultProps = {
        // assetHost: 'https://assets.scratch.mit.edu',
        assetHost: 'http://localhost:8603',
        projectHost: 'https://projects.scratch.mit.edu'
    };

图片和声音加载可以了，但是有一个问题，在精灵选择时显示的缩略图界面，精灵的图片显示不正常，但是选择了精灵以后舞台下面的精灵图片显示正常