Code Monkey home page Code Monkey logo

githublog's Introduction

githublog

A super small blog repo. xxxx You can use github's issuse to present your blog posts in real time without having to repackage them online. Each of your blogs is visible in real time, and suppurt gitalk and mermaid, other users can comment and like at any time.

Demo:

Install

private web server

clone all code to your webserver root

git clone https://github.com/taontech/githublog.git your-webserver-path

install with Github pages

fork this repo.

settings

  1. After fork repo, remember to open issues, the default fork repo is to close issuse.
  2. Write the first issuse
  3. Create a new app in "setting -> developer settings -> OAuth Apps", and write the domain name: "https://yourname.github.io", generate a new client secret.
  4. Open the repo "pages", select the main branch and any of the themes.

modify config

modify config.json file

"127.0.0.1":{
    "owner" : "your Github count name",
    "repo" : "your repo which hold the issuses",
    "clientId" : "github client id",
    "clientSecret" : "github clentSecret"
    "theme":"default"
}

Note:: When you add the Oauth App to obtain the required secretkey, you need to add the correct domain name, which is the domain name that will eventually provide the webservice.

Example:

"tech.top" :{
    "owner" : "taontech",
    "repo" : "githublog",
    "clientId" : "16a063cf308dce2e4ac0",
    "clientSecret" : "ca53b8ba928064a6ff64ef1fde762196625ef90a"
    "theme":"forest"
}

how to Get client id and client secret?

    1. Your count Settings

截屏2022-04-17 22 02 21

- 2. **Developer Settings**

截屏2022-04-17 22 03 37

- 3. **New Oauth App**

截屏2022-04-17 22 04 17

- 4.

截屏2022-04-17 22 05 54

⚠️Attation: Your application’s callback URL. Read OAuth documentation for more information.

Then

Enjoy!

githublog's People

Contributors

taontech avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

taopinbei

githublog's Issues

Eye-Dome-Lighting

Shaders:

Potree.Shaders["edl.fs"] = [
 "// ",
 "// adapted from the EDL shader code from Christian Boucheny in cloud compare:",
 "// https://github.com/cloudcompare/trunk/tree/master/plugins/qEDL/shaders/EDL",
 "//",
 "",
 "#define NEIGHBOUR_COUNT 4",
 "",
 "uniform float screenWidth;",
 "uniform float screenHeight;",
 "uniform vec2 neighbours[NEIGHBOUR_COUNT];",
 "uniform float edlStrength;",
 "uniform float radius;",
 "uniform float opacity;",
 "",
 "uniform sampler2D colorMap;",
 "",
 "varying vec2 vUv;",
 "",
 "const float infinity = 1.0 / 0.0;",
 "",
 "float response(float depth){",
 "	vec2 uvRadius = radius / vec2(screenWidth, screenHeight);",
 "	",
 "	float sum = 0.0;",
 "	",
 "	for(int i = 0; i < NEIGHBOUR_COUNT; i++){",
 "		vec2 uvNeighbor = vUv + uvRadius * neighbours[i];",
 "		",
 "		float neighbourDepth = texture2D(colorMap, uvNeighbor).a;",
 "		",
 "		if(neighbourDepth == 0.0){",
 "			neighbourDepth = infinity;",
 "		}",
 "		",
 "		sum += max(0.0, depth - neighbourDepth);",
 "	}",
 "	",
 "	return sum / float(NEIGHBOUR_COUNT);",
 "}",
 "",
 "void main(){",
 "	vec4 color = texture2D(colorMap, vUv);",
 "	",
 "	float depth = color.a;",
 "	if(depth == 0.0){",
 "		depth = infinity;",
 "	}",
 "	",
 "	float res = response(depth);",
 "	float shade = exp(-res * 300.0 * edlStrength);",
 "	",
 "	if(color.a == 0.0 && res == 0.0){",
 "		discard;",
 "	}",
 "	",
 "	gl_FragColor = vec4(color.rgb * shade, opacity);",
 "}",
 "",
].join("\n");

新增多域名支持

可以在config中指定多个域名,多个域名即可使用同一套数据。

周末愉快

这个GitHub app 写markdown挺好用

这是什么

有点意思

有点意思

⚠️圖片還能自動上傳,這個功能太爽了

markdown语法检测贴


title: "Markdonw"
date: 2022-03-22T12:27:53+08:00

Markdown 高级用法

⚠ WARNING: Aliens are coming.
A description of the colour, smell and dangerous behaviour of the aliens.

<body class="body_issuse">
    <div class="ownerline" >
        <div>
            <img id="headImg"></img>
        </div>
        
         <span class="ownerName owner-span" id="owner"></span>
         <a href="https://github.com/taontech/githublog" class="githublog_text"> Githublog </a>

    </div>
    <div id="title" class="titlestyle" > 
        <p>GithuBlog</p> 
    </div>
	<div id = "iss-container" class="iss-container" style="margin-top:30px; width: 100%;">
	</div> 
    <a href="javascript:history.go(-1)"> 返回上一页 </a>
    
</body>
var reader = new commonmark.Parser();
        var writer = new commonmark.HtmlRenderer({ sourcepos: true });

        var render = function(parsed) {
            if (parsed === undefined) {
                return;
            }
            var startTime = new Date().getTime();
            var result = writer.render(parsed);
            document.getElementById("iss-container").innerHTML=result;
        };
        var parseAndRender = function(text) {
            var parsed = reader.parse(text);
            render(parsed);
        };
        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }
void main(){
    vec3 pos;
    pos = aPosition;
    pos.x = 3.0 * sin(float(gl_VertexID)/400.0);
    pos.y = 3.0 * cos(float(gl_VertexID)/400.0);
    pos.z = float(gl_VertexID)/39000.0;
    pos.x = float(int(pos.x) % 20) + 3.0 * sin(float(gl_VertexID)/400.0);
    pos.y = float(int(pos.y) % 20) + 3.0 * cos(float(gl_VertexID)/400.0);
    pos.z = float(int(pos.z) % 20) + float(gl_VertexID)/39000.0;
    gl_Position = uProjectMatrix * uViewMatrix*uModelMatrix * vec4(pos.x, pos.y, pos.z, 1);

    gl_PointSize = uPointSize;
    vec3 hsl = vec3(float(gl_VertexID)/60000.0, 0.8, 0.8);
    vColor.rgb = hsb_rgb(hsl);
    vColor.a = 0.8;
}
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end
Loading
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
Loading
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
Loading
erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }
Loading

可以成功的

stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Loading
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts<br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
Loading
gantt
dateFormat  YYYY-MM-DD
title 使用Mermaid增加甘特图
excludes weekdays 2014-01-10

section A 部分
已完成的任务            :done,    des1, 2014-01-06,2014-01-08
正在做的任务               :active,  des2, 2014-01-09, 3d
未完成任务1               :         des3, after des2, 5d
未完成任务2               :         des4, after des3, 5d
Loading
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
Loading
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    B --> G[/Another/]
    C ==>|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
    C -->|Fr| H[hahah]
    subgraph section1
    
    H
    D
    G
    
    end
Loading

宋江反诗

自幼曾攻经史,长成亦有权谋。恰如猛虎卧荒丘,潜伏爪牙忍受。不幸刺文双颊,那堪配在江州。他年若得报冤仇,血染浔阳江口!
心在山东身在吴,飘蓬江海谩嗟吁。他时若遂凌云志,敢笑黄巢不丈夫!
——郓城宋江作

使用EDL辅助人工点云对齐

EDL

利用EDL(eye-dome lighting) 可以加深屏幕内深度落差,用突出颜色渲染,即可帮助手动对齐点云。
利用同样原理,可以对场景中深度变化进行描边或高亮

显示效果

下载特定功能Caddy2

	caddy_tmp="/tmp/install_caddy/"
	caddy_tmp_file="/tmp/install_caddy/caddy"
	caddy_arch="arm64"
	[[ -d $caddy_tmp ]] && rm -rf $caddy_tmp
	if [[ ! ${caddy_arch} ]]; then
		echo -e "$red 获取 Caddy 下载参数失败!$none" && exit 1
	fi
	#https://github.com/caddyserver/caddy/releases/download/v2.4.6/caddy_2.4.6_linux_amd64.tar.gz
	# local caddy_download_link="https://caddyserver.com/download/linux/${caddy_arch}?license=personal"
	# caddy_download_link="https://github.com/caddyserver/caddy/releases/download/v2.4.6/caddy_2.4.6_linux_arm64.tar.gz"
	caddy_download_link="https://caddyserver.com/api/download?os=linux&arch=arm64&p=github.com%2FWingLim%2Fcaddy-webhook&p=github.com%2Fgreenpau%2Fcaddy-git&idempotency=39452383534107"
	mkdir -p $caddy_tmp

	if ! wget --no-check-certificate -O "$caddy_tmp_file" $caddy_download_link; then
		echo -e "$red 下载 Caddy 失败!$none" && exit 1
	fi

	#tar zxf $caddy_tmp_file -C $caddy_tmp
	cp -f ${caddy_tmp}caddy /usr/local/bin/

	# wget -qO- https://getcaddy.com | bash -s personal

	if [[ ! -f /usr/local/bin/caddy ]]; then
		echo -e "$red 安装 Caddy 出错!$none" && exit 1
	fi

网页提高亮度的方式

亮标题

filter:brightness(1.5-10)
-webkit-background-filter:brightness(1)

然后

<video></video>

map.mov

Point Cloud Renderer with EDL

PCRE(Point Cloud Renderer with EDL) almost Done

Feature

  1. 空间插值
  2. 快速多级LOD
  3. 最小化DrawCall
  4. EDL(眼顶光)-强度距离可设置
  5. CPU 裁剪
  6. 最多100M点数渲染
  7. 高度着色
  8. 亚像素深度图、亚像素彩色图读取
  9. 点位大小自适应
  10. 全参数动画
  11. 极速加载(5000点位秒级加载)
  12. 60帧
  13. 标号资源最小化,3位数显示
  14. 非线性旋转操作
  15. 点云数据无绑定
  16. GPU ray cast, 毫秒选中

手机创建测试

標題

創建新經貿大寫

手機頁面怎麼適配呢?現在看頁面字體非常小

截图

主页和内容页截图
image
image

图片自动适应大小完成

直接用的common mark.js 但是github上就可以,一定是有什么设置没弄好

简单改了下 commonmark库,暂时加了个100%宽度,看起来可以了。

CSS太坑

找到 下面的方法,给style加上 **width=100%; **。

    function image$1(node, entering) {
        if (entering) {
            if (this.disableTags === 0) {
                if (this.options.safe && potentiallyUnsafe(node.destination)) {
                    this.lit('<img src="" width=100%; alt=" ');
                } else {
                    this.lit('<img src="' + this.esc(node.destination) + '" width=100%; alt="');
                }
            }
            this.disableTags += 1;
        } else {
            this.disableTags -= 1;
            if (this.disableTags === 0) {
                if (node.title) {
                    this.lit('" title="' + this.esc(node.title));
                }
                this.lit('" />');
            }
        }
    }

但是, 这样做的会导致小图片也会被拉伸到100%。
所以改成这样子:max-width=100%,遗憾的是大图就不起作用了。
需要改成 style="max-width: 100%;",经常忘记的选项,但是width=100%写在这里就好使

    function image$1(node, entering) {
        if (entering) {
            if (this.disableTags === 0) {
                if (this.options.safe && potentiallyUnsafe(node.destination)) {
                    this.lit('<img src="" style="max-width: 100%;" alt=" ');
                } else {
                    this.lit('<img src="' + this.esc(node.destination) + '" style="max-width: 100%;" alt="');
                }
            }
            this.disableTags += 1;
        } else {
            this.disableTags -= 1;
            if (this.disableTags === 0) {
                if (node.title) {
                    this.lit('" title="' + this.esc(node.title));
                }
                this.lit('" />');
            }
        }
    }

效果就变成了下面的样子
小图:

小图

大图:

image

送毛伯温

大将南征胆气豪,腰横秋水雁翎刀。
风吹鼍鼓山河动,电闪旌旗日月高。
天上麒麟原有种,穴中蝼蚁岂能逃。
太平待诏归来日,朕与先生解战袍。

牛逼的验证全部通过

🐮🍺的

哇哈哈哈

<!DOCTYPE html>
<html>
     <link href="bootstrap.min.css" rel="stylesheet">
    <!-- <link href="githublog.css" rel="stylesheet"> -->
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="lodash.min.js"></script> 
 <head>
 <title>文字卡片效果</title>
</head>
<script>
    // var reader = new commonmark.Parser();
    // var writer = new commonmark.HtmlRenderer({ sourcepos: true });

    // var render = function(parsed) {
    //     if (parsed === undefined) {
    //         return;
    //     }
    //     var startTime = new Date().getTime();
    //     var result = writer.render(parsed);
    //     document.getElementById("content").innerHTML=result;
    // };
    // var parseAndRender = function(text) {
    //     var parsed = reader.parse(text);
    //     render(parsed);
    // };
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    function showMarkdown(){
        // var writer = new commonmark.HtmlRenderer({ sourcepos: true });
        var xmlhttp;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var bb = JSON.parse(xmlhttp.responseText)
                console.log(bb)
                // parseAndRender(bb.body)
                // loadMermaidOnNeed()
                
                bb.forEach(issuse => {
                    var container = document.getElementById("blog")
                    var iss = document.createElement("div")
                    iss.className = "card row"
                    var titlediv = document.createElement("div")
                    titlediv.className = "header"
                    var title = document.createElement("a")
                    // title.herf = issuse.html_url
                    title.setAttribute("href","http://127.0.0.1:8080/issuse.html?iid="+issuse.number)
                    title.innerText = issuse.title
                    titlediv.appendChild(title)

                    // titlediv.setAttribute("href",issuse.html_url)
                    iss.appendChild(titlediv)
                    

                    container.appendChild(iss)
                });
            }
        }
        xmlhttp.open("GET","https://api.github.com/repos/taontech/githublog/issues",true);
        xmlhttp.send();
    }
    showMarkdown()
</script>
 <style>
    div.card {
        width: 650px;
        padding: 10px;
        text-align: center;
        border-radius: .45rem!important;
        border: 2px solid #dee2e6!important;
        box-shadow: 0 .325rem .55rem rgba(0,0,0,.275)!important;
        background-color: #ffffff;
    }​
    div.header {
        border: 2px solid #dee2e6;
        box-shadow: 0 .325rem .55rem rgba(0,0,0,.275)!important;
        background-color: #003e58!important;
        color: rgb(10, 120, 76);
        padding: 10px;
        text-align: center;
        font-size: 40px;
    }​
    div.container {
        padding: 10px;
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    }
    .row {
        margin:auto ;
    }
    .blogContainer {
        padding:10px;
    }
</style>

<body>
<h2>Taon的blog尝试</h2>
<p>The way we win matters!</p>

<div class="blogContainer" id="blog">​
    <!-- <div class="card row">
        <div class="header">
            <h1>123</h1>
        </div>
        <div class="container">
            <p>January 1, 2016</p>
        </div>
    </div>

    <div class="card row">
        <div class="header">
            <h1>123456</h1>
        </div>
        <div class="container">
            <p>January 1, 2016</p>
        </div>
    </div> -->
</div>
</body>
</html>

《醉太平·讥贪小利者》

夺泥燕口,削铁针头,刮金佛面细搜求:无中觅有。鹌鹑嗉里寻豌豆,鹭鸶腿上劈精肉,蚊子腹内刳脂油。亏老先生下手!

正式全功能通过

没想到gitalk 的集成如此简单,大神的设计非常牛皮,人家已经想到了可能的情况

搭建流程

大致流程

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#22aadd', 'edgeLabelBackground':'#223366', 'tertiaryColor': '#222233','lineColor':'#888888','textColor':'#888888','primaryTextColor':'#ffffff'} } }%%
        graph TD
          A(开始) --> B(Fork GithubBlog.git)
          B --> Q{私有服务?}
          P --> C(Github Setting)
          Q --> |No|P(Open Github pages)
          C --> E(Add Oauth App)
          C --> F(Open repo issuse)
          C --> G(Change Config.json)
          Q --> |Yes|H(Pull repo)
          H --> C
          subgraph Github
          C
          E
          F
          P
          end
Loading
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    commit
    checkout main
    merge develop
    commit
    commit
    branch product
    checkout product
    commit
    commit
    commit
    checkout develop
    merge product
    commit
    checkout main
    merge develop
    commit
Loading
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
Loading
C4Context
title System Context diagram for Internet Banking System

Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

Enterprise_Boundary(b1, "BankBoundary") {

  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

  System_Boundary(b2, "BankBoundary2") {
    System(SystemA, "Banking System A")
    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
  }

  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

  Boundary(b3, "BankBoundary3", "boundary") {
    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
  }
}

BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
Rel(customerA, customerB,"connected person")
Loading

图片转HDR视频

关键代码

重点是这个设置

        let outputSettings = [
            AVVideoCodecKey: AVVideoCodecType.hevc,
            AVVideoWidthKey : NSNumber(value: Float(outputSize.width)),
            AVVideoHeightKey : NSNumber(value: Float(outputSize.height)),
            AVVideoColorPropertiesKey : [ AVVideoTransferFunctionKey: AVVideoTransferFunction_ITU_R_2100_HLG,
                                                        AVVideoColorPrimariesKey: AVVideoColorPrimaries_ITU_R_2020,
                                                        AVVideoYCbCrMatrixKey: AVVideoYCbCrMatrix_ITU_R_2020
                                                         ],
            AVVideoCompressionPropertiesKey:     [AVVideoProfileLevelKey:kVTProfileLevel_HEVC_Main10_AutoLevel,AVVideoAverageBitRateKey:NSNumber(value: Float(3000000))]
        ] as [String:Any]
@IBAction func makeHDRMovie(){
        
        let hdrimage = hdrImagePixelBuffer(uiImage:(self.imageView?.image)!)
        
        // todo make movie
        let fileManager = FileManager.default
            let urls = fileManager.urls(for: .cachesDirectory, in: .userDomainMask)
            guard let documentDirectory = urls.first else {
                fatalError("documentDir Error")
            }
        let videoOutputURL = documentDirectory.appendingPathComponent("hdr.mp4")
        
        if FileManager.default.fileExists(atPath: videoOutputURL.path) {
            do {
                try FileManager.default.removeItem(atPath: videoOutputURL.path)
            } catch {
                fatalError("Unable to delete file: \(error) : \(#function).")
            }
        }
        guard let videoWriter = try? AVAssetWriter(outputURL: videoOutputURL, fileType: AVFileType.mov) else{
            fatalError("AVAssetWriter creat error")
        }
        let outputSize = (self.imageView?.image?.size)!
        let outputSettings = [
            AVVideoCodecKey: AVVideoCodecType.hevc,
            AVVideoWidthKey : NSNumber(value: Float(outputSize.width)),
            AVVideoHeightKey : NSNumber(value: Float(outputSize.height)),
//            AVVideoTransferFunctionKey: AVVideoTransferFunction_ITU_R_2100_HLG,
//            AVVideoColorPrimariesKey: AVVideoColorPrimaries_ITU_R_2020,
//            AVVideoYCbCrMatrixKey: AVVideoYCbCrMatrix_ITU_R_2020,
//            AVVideoProfileLevelKey: kVTProfileLevel_HEVC_Main10_AutoLevel
            AVVideoColorPropertiesKey : [             AVVideoTransferFunctionKey: AVVideoTransferFunction_ITU_R_2100_HLG,
                                                        AVVideoColorPrimariesKey: AVVideoColorPrimaries_ITU_R_2020,
                                                        AVVideoYCbCrMatrixKey: AVVideoYCbCrMatrix_ITU_R_2020
                                                         ],
            AVVideoCompressionPropertiesKey: [AVVideoProfileLevelKey:kVTProfileLevel_HEVC_Main10_AutoLevel,AVVideoAverageBitRateKey:NSNumber(value: Float(3000000))]
        ] as [String:Any]
        guard videoWriter.canApply(outputSettings: outputSettings, forMediaType: .video) else {
            fatalError("输出设定不支持")
        }
        
//        let av = AVAsset(url: <#T##URL#>)
//        guard let exportSession = AVAssetExportSession(asset: <#T##AVAsset#>, presetName: <#T##String#>)

        
        let videoWriterInput = AVAssetWriterInput(mediaType: .video, outputSettings: outputSettings)
        let sourcePixelBufferAttributesDictionary = [
            kCVPixelBufferPixelFormatTypeKey as String : NSNumber(value: kCVPixelFormatType_420YpCbCr10BiPlanarVideoRange),
            kCVPixelBufferWidthKey as String: NSNumber(value: Float(outputSize.width)),
            kCVPixelBufferHeightKey as String: NSNumber(value: Float(outputSize.height))
        ]
        pixelBufferAdaptor = AVAssetWriterInputPixelBufferAdaptor(assetWriterInput: videoWriterInput, sourcePixelBufferAttributes: sourcePixelBufferAttributesDictionary)
        if videoWriter.canAdd(videoWriterInput){
            videoWriter.add(videoWriterInput)
        }
        if videoWriter.startWriting(){
            videoWriter.startSession(atSourceTime: .zero)
            assert(pixelBufferAdaptor?.pixelBufferPool != nil)
            let madia_queue = DispatchQueue(label: "madiaInputQueue")
            videoWriterInput.requestMediaDataWhenReady(on: madia_queue) { [self] in
                let fps: Int32 = 30
                let frameDuration = CMTimeMake(value: 1, timescale: fps)
                var frameCount: Int64 = 0
                var appendSucceded = true
                // do data things
                // 1st frame
                var lastFrameTime = CMTime(value: frameCount, timescale: fps)
                var presentationTime = frameCount == 0 ? lastFrameTime : CMTimeAdd(lastFrameTime, frameDuration)
                var pixelBuffer: CVPixelBuffer?
//                DispatchQueue.main.sync {
//                    pixelBuffer = buffer(from: (self.imageView?.image!)!)
                    pixelBuffer = buffer(from: hdrimage!)
//                }
                guard let pixelBuffer = pixelBuffer else {
                    return
                }
                
                while ( frameCount < 90 ){
                    if videoWriterInput.isReadyForMoreMediaData {
                        lastFrameTime = CMTime(value: frameCount, timescale: fps)
                        presentationTime = frameCount == 0 ? lastFrameTime : CMTimeAdd(lastFrameTime, frameDuration)
                        appendSucceded = ((pixelBufferAdaptor?.append(pixelBuffer, withPresentationTime: presentationTime)) != nil)
                    } else {
                        print("append fail")
                        appendSucceded = false
//                        sleep(1)
                        continue
                    }
                    if !appendSucceded{
                        sleep(1)
                       break
                    }
                    print(frameCount)
                    frameCount = frameCount + 1
                }
//                sleep(1)
                videoWriterInput.markAsFinished()
                videoWriter.finishWriting {
                    print("done")
                    self.saveVideoToLibrary(videoURL: videoOutputURL)
                }
            }
        }
    }
    func saveVideoToLibrary(videoURL: URL) {
        PHPhotoLibrary.shared().performChanges({
            PHAssetChangeRequest.creationRequestForAssetFromVideo(atFileURL: videoURL)
        }) { saved, error in

            if let error = error {
                print("Error saving video to librayr: \(error.localizedDescription)")
            }
            if saved {
                print("Video save to library")

            }
        }
    }
    func buffer(from ciimage:CIImage) -> CVPixelBuffer?{
        let attrs = [kCVPixelBufferCGImageCompatibilityKey: kCFBooleanTrue, kCVPixelBufferCGBitmapContextCompatibilityKey: kCFBooleanTrue] as CFDictionary
        var pixelBuffer : CVPixelBuffer?
        let status = CVPixelBufferCreate(kCFAllocatorDefault, Int(ciimage.extent.width), Int(ciimage.extent.height), kCVPixelFormatType_420YpCbCr10BiPlanarVideoRange, attrs, &pixelBuffer)

        guard (status == kCVReturnSuccess) else {
            return nil
        }
        let context = CIContext()
        let cs = context.workingColorSpace
        print(cs)
        context.render(ciimage, to: pixelBuffer!, bounds: ciimage.extent, colorSpace: CGColorSpace(name: CGColorSpace.extendedITUR_2020))
        
        return pixelBuffer
    }

    func hdrImagePixelBuffer(uiImage:UIImage) -> CIImage?{

        let colorSpace = CGColorSpace(name: CGColorSpace.itur_709)!

        let ci = ciImage!.matchedFromWorkingSpace(to: colorSpace)
        
        let brightness: CIColorKernel = {
            let url = Bundle.main.url(forResource: "default", withExtension: ".metallib")!
            let data = try! Data.init(contentsOf: url)
            let nn = CIColorKernel.kernelNames(fromMetalLibraryData: data)
    //        CIColorKernel.kernelNames(fromMetalLibraryData: )
            print(nn)
            return try! CIColorKernel(functionName: "HDRHighlight", fromMetalLibraryData: data)
        }()
        let width = uiImage.size.width
        let height = uiImage.size.height
        let extent = CGRect(x: 0, y: 0, width: width, height: height)
        guard let final = brightness.apply(extent: extent,
         roiCallback: {(index,rect) in
               return rect
         },
        arguments: [ci]) else {
            return nil
        }
//        let outcs = CGColorSpace(name: CGColorSpace.displayP3_PQ)
        return final
    }

oracle对象存储使用记录

本文中所有图片链接都来自Oracle对象存储

可以修改的内容如下:

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#22aadd', 'edgeLabelBackground':'#223366', 'tertiaryColor': '#222233','lineColor':'#888888','textColor':'#888888','primaryTextColor':'#ffffff'} } }%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          C --> G
          subgraph section
            C
            D
            E
            F
            G
          end
Loading
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#22aadd', 'edgeLabelBackground':'#223366', 'tertiaryColor': '#22bb33','lineColor':'#888888','textColor':'#888888','primaryTextColor':'#ffffff'} } }%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          C --> G
          subgraph section
            C
            D
            E
            F
            G
          end
Loading
    var reader = new commonmark.Parser();
    var writer = new commonmark.HtmlRenderer({ sourcepos: true });

    var render = function(parsed) {
        if (parsed === undefined) {
            return;
        }
        var startTime = new Date().getTime();
        var result = writer.render(parsed);
        document.getElementById("content").innerHTML=result;
    };
    var parseAndRender = function(text) {
        var parsed = reader.parse(text);
        render(parsed);
    };

只是这链接的生成太过繁琐。

桶链接

桶中所有资源都只需要在桶链接的基础上加上文件名称即可访问。

桶链接为 https://objectstorage.ap-seoul-1.oraclecloud.com/p/X8Kr9quwi4Bh1XpCMNPPV298-0MHcGrmGzPb28YudrO92VwBIB9HKWeyYkIWdxft/n/cnlim0eg821n/b/bucket-20220329-1150/o/

上图中对应的亮度增益为

可以看出,苹果对与亮度的处理还是非常细节。
上面亮度图使用iphone13pro拍摄的普通照片,格式采用兼容,则上面彩色途中的JPG中就会保存一张额外的亮度增益图,使用工具 exiftool 的命令

exiftool -b -"MPImage2" IMG_1058.JPG > mp1058.jpg

即可导出这张图,后续搞搞从heic中导出辅助图片的方法。

欢迎使用githublog

githublog

A super small blog repo.
You can use github's issuse to present your blog posts in real time without having to repackage them online. Each of your blogs is visible in real time, and suppurt gitalk and mermaid, other users can comment and like at any time.

Demo:

Install

private web server

clone all code to your webserver root

git clone https://github.com/taontech/githublog.git your-webserver-path

install with Github pages

fork this repo.

settings

  1. After fork repo, remember to open issues, the default fork repo is to close issuse.
  2. Write the first issuse
  3. Create a new app in "setting -> developer settings -> OAuth Apps", and write the domain name: "https://yourname.github.io", generate a new client secret.
  4. Open the repo "pages", select the main branch and any of the themes.

modify config

modify config.json file

{
    "owner" : "your Github count name",
    "repo" : "your repo which hold the issuses",
    "clientId" : "github client id",
    "clientSecret" : "github clentSecret"
}

Note:: When you add the Oauth App to obtain the required secretkey, you need to add the correct domain name, which is the domain name that will eventually provide the webservice.

Example:

{
    "owner" : "taontech",
    "repo" : "githublog",
    "clientId" : "16a063cf308dce2e4ac0",
    "clientSecret" : "ca53b8ba928064a6ff64ef1fde762196625ef90a"
}

Then

Enjoy!

TODO:

  • themes
  • highlight

难以调试的图片压缩尝试

尝试将一张HDR Gain Map添加到一张图片中,生成heic。

遗憾的是,并不能顺利的压缩进入,网路上找不到任何的资料,仅有的一个参考是将深度图合并进入,但是这两个的Auxiliary 类型并不相同,重要的是,我们必须要将加入的数据和苹果相机拍摄出来的一致,这样才能在相册中查看高亮的效果。

如何添加Oauth App

#11 中需要的Oauth App添加过程

⚠️Attation: Your application’s callback URL. Read OAuth documentation for more information.

  1. Your count Settings

截屏2022-04-17 22 02 21

2. **Developer Settings**

截屏2022-04-17 22 03 37

3. **New Oauth App**

截屏2022-04-17 22 04 17

4.

截屏2022-04-17 22 05 54

caddyfile 配置

线上的配置

供大家参考

https://taon.top {
	tls [email protected]
        encode gzip
        log {
                output file /var/log/caddywww.log
        }
	route /update {
    		webhook {
     	 		repo https://github.com/taontech/githublog.git
     	 		branch main
     	 		path /etc/caddy/githublog
     	 		secret githublog
   		 }
 	}
        root githublog
        file_server
        handle_errors {
                @404 {
                        expression {http.error.status_code} == 404
                }
                handle @404 {
                        rewrite * /404.html
                        file_server
                }
        }
}

色域转换

先看效果

map.mov

// https://user-images.githubusercontent.com/990488/164454078-0c6e6366-c34c-4da0-ade5-5113de4b8569.mov

转换过程中几个关键节点

CVPixelBuffer的创建

    func buffer(from ciimage:CIImage) -> CVPixelBuffer?{
        let attrs = [kCVPixelBufferCGImageCompatibilityKey: kCFBooleanTrue, kCVPixelBufferCGBitmapContextCompatibilityKey: kCFBooleanTrue] as CFDictionary
        var pixelBuffer : CVPixelBuffer?
        let status = CVPixelBufferCreate(kCFAllocatorDefault, Int(ciimage.extent.width), Int(ciimage.extent.height), kCVPixelFormatType_420YpCbCr10BiPlanarVideoRange, attrs, &pixelBuffer)
        guard (status == kCVReturnSuccess) else {
            return nil
        }
        let context = CIContext()
        let cs = context.workingColorSpace
        print(cs)
        context.render(ciimage, to: pixelBuffer!, bounds: ciimage.extent, colorSpace: CGColorSpace(name: CGColorSpace.itur_2100_HLG ))
        return pixelBuffer
    }

OutputSetting的设置

        let outputSize = (self.imageView?.image?.size)!
        let outputSettings = [
            AVVideoCodecKey: AVVideoCodecType.hevc,
            AVVideoWidthKey : NSNumber(value: Float(outputSize.width)),
            AVVideoHeightKey : NSNumber(value: Float(outputSize.height)),
            AVVideoColorPropertiesKey : [AVVideoTransferFunctionKey: AVVideoTransferFunction_ITU_R_2100_HLG,
                                        AVVideoColorPrimariesKey: AVVideoColorPrimaries_ITU_R_2020,
                                        AVVideoYCbCrMatrixKey: AVVideoYCbCrMatrix_ITU_R_2020
                                         ],
            AVVideoCompressionPropertiesKey: [AVVideoProfileLevelKey:kVTProfileLevel_HEVC_Main10_AutoLevel/*,AVVideoAverageBitRateKey:NSNumber(value: Float(3000000))*/ ,AVVideoQualityKey:NSNumber(value: Float(0.85)),AVVideoMaxKeyFrameIntervalKey:NSNumber(value: Float(250)),AVVideoMaxKeyFrameIntervalDurationKey:NSNumber(value: Float(10))]
            
        ] as [String:Any]
        guard videoWriter.canApply(outputSettings: outputSettings, forMediaType: .video) else {
            fatalError("输出设定不支持")
        }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.