Fork me on GitHub

项目中遇到的问题

在此记录一些杂七杂八的遇到的神奇的问题

跨域问题

访问阿里云oss图片文件跨域

项目中 canvas 使用 toDataURL() 方法导出图片base64信息

图片设置 img.crossOrigin = ‘Anonymous’; 【为啥图片要设置这个，canvas跨域渲染图片会导致画布污染，无法导出图片】结果报错跨域

1
Access to image at xxx from origin xxx has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因：在网上查询问题原因是由于cdn缓存问题导致。通过控制台 network中的 disabled chache 选项打开就好了，可以确定是这个问题

img

解决方法

在图片路径后边加上时间戳

1
https://rongdao.oss-cn-beijing.aliyuncs.com/2023/12/19/20231219174004_20231219094008A824.jpg?1706081125760

参考文章

环境问题

window.crypto.randomUUID 无法使用

原因是 http部署环境下不能使用这个方法，如同 拉取媒体设备，webrtc 也是同样的问题

其他

将网站缓存至本地在将其制作成 .chm 文档 教程

准备环境和工具（软件联想应用商店都有，英文版本）

  1. 系统环境：WIN10系统
  2. 制作工具：Teleport Ultra;EasyCHM

制作步骤

扒目标站点

启动Teleport_Ultra.exe（免费版不能缓存超过500个文件夹），依次选择：文件–>新建项目向导–>复制一个网站，包含该网站的目录结构–>复制网站地址–>下一步–>所有文件–>下一步–>完成

选择文件保存位置，然后选择保存，最后点击蓝色的小三角形开始下载，等待下载完成整个网站资源

CHM离线文件制作

  1. 等待文件全部下载完成之后打开EasyCHM软件，依次选择：新建–>选择所下载的那个文件夹–>确定，然后等待加载完成所有文件
  2. 搜索完成之后，点击编译按钮即可进行编译环节，CHM设置是生成CHM的手册的配置，默认即可，也可以根据自己的需要进行设置

展开全文 >>

webrtc 基础

WebRTC是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点的（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。它包括的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

理论知识

媒体协商（sdp）

​ 彼此了解对方支持的媒体格式，这是两个不同网络环境浏览器要实现语音视频通话的首要解决问题

网络协商（candidate）

​ 了解对方的网络情况

  1. 获取外网IP地址映射

  2. 通信服务器交换网络信息

实际情况是：我们电脑和电脑之间或大或小都是在某个局域网里面，需要NAT(网络地址转换)

more >>

展开全文 >>

虚拟机安装Ubuntu ssh 连接

Ubuntu 与 conteos 最大区别就是 Ubuntu 安装后自带操作界面。很流畅，虽然conteos 也能安装界面但是不好用，卡的一批。然后就是包管理工具，编辑 等一些命令不一样

下载好 Ubuntu ISO镜像后，在虚拟机上安装好。登录后发现 连接工具 无法访问 Ubuntu

​ ubuntu18.04中只默认安装了openssh-client,所以如果想用ssh远程登录ubuntu，需要下载安装openssh-server，并启动ssh服务

more >>

展开全文 >>

音视频基础

需要了解下Linux和c语言基础，主要用到的工具 ffmpeg

安装 ffmpeg

mac 环境下推荐 brew 方式， 其他环境推荐使用源码方式下载安装

  1. 下载 ffmpeg

    可以选择 git 下载，慢的话用 http方式下载快照版本

  2. 编译 ffmpeg

    如果出现操作权限不够，可以同过在命令前面加 sudo 提高权限

    1
    2
    3
    4
    5
    6
    // 指定安装目录 /usr/local/ffmpeg，设置debug模式3
    ./configure -prefix=/usr/local/ffmpeg -enable-debug=3
    // 指定 4核模式
    make -j 4
    // 安装
    make install
    more >>

展开全文 >>

GeoServer

GeoServer 是一个优秀得开源的GIS服务器，它相较于商用的GIS软件 ArcGIS Server\SuperMap iServer 等服务器软件，它能实现大多数场景下项目对GIS的功能要求，而且有活跃的社区支持，在实际生产中也越来越受到开发者的青睐。

GeoServer的诞生历史

GeoServer于2001年由总部位于纽约的非盈利技术孵化器open planning project (TOPP),启动TOPP正在创建一套工具，以实现开放民主，并帮助政府更加透明。第一个是GeoServer，这是因为人们认识到，共享空间数据的能力将(成为) 大大增强公民参与政府和城市规划的一套工具。

GeoServer的创始人设想了一个类似于万维网的地理空间网。通过万维网，人们可以搜索和下载文本。通过地理空间网，人们可以搜索和下载空问数据。数据提供者将能够直接将他们的数据发布到这个网站上，用户可以直接访问它，而不是现在存在的间接和繁琐的数据共享方法。

GeoServer的相关人员创建了GeoTools项目，这是一个开源的GIS Java工具包。通过GeoTools，增加了对shapefile、Oracle数据库、ArcSDE集成等的支持

其他项目变得相互关联。Refractions Research创建了一个免费开放的空间数据库PostGIS，使GeoServer能够连接到一个免费的数据库。另外，MetaCarta最初创建了OpenLayers.一个基于开源浏览器的地图查看工具。这些工具一起增强了GeoServer的功能。

这使得使用开源技术路线构建GIS工作流成为可能，数据可以从PostGIS流入GeoServer、再应用OpenLayers将GeoServer发布的地图服务在前端进行展现和互操作。

WebGIS开发环境搭建

下载完成后可参考b站视频教程

more >>

展开全文 >>

vue反编译

最近遇到一个需求，将一个打包的vue项目反编译回源代码模式。以下就是探索过程

使用 vue反编译库 reverse-sourcemap

1
npm install --global reverse-sourcemap

使用方式

将源码映射文件 xxx.js.map 编译到 src目录

1
reverse-sourcemap --output-dir src xxx.js.map
more >>

展开全文 >>

mixin 实战

一个简单的mixin 使用示例，用于管理 项目中的 字典，下拉数据. 下边代码仅为参考，主要思路就是 通过mixin 加载 字典存储到 store ，将 store 中字典 共享到data中

通用字典

more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。