星夜的蓝天

CDN加速typecho插件版看板娘live2d伊斯特瓦尔
CDN加速typecho插件版看板娘live2d伊斯特瓦尔 ps:不要问我为什么不拿伊斯特瓦尔的图片当头图,我找...
扫描右侧二维码阅读全文
11
2018/08

CDN加速typecho插件版看板娘live2d伊斯特瓦尔

CDN加速typecho插件版看板娘live2d伊斯特瓦尔

ps:不要问我为什么不拿伊斯特瓦尔的图片当头图,我找不到…………如果谁有在P站上有适合的头图,欢迎在底下评论分享给我,我马上就换!

前言

一个博客如果有一只萌萌的看板娘帮你看着,那感觉多棒,随时随地都想犯罪有没有……

安装

咳咳,关于看板娘的安装,在这里贴一下原作者广树大大的链接,Typecho插件版之给博客加上能陪聊的Live2d伊斯特瓦尔&蕾姆【ver1.1.3】,或者去我的友链里找也有,安装方法就如同正常的typecho插件的安装就行了,装好后,插件目录应该有这8个文件,(我推荐插件文件夹目录名都为Live2dHistoire)

  • css
  • images
  • js
  • model
  • action.php
  • message.json
  • message_rem.json
  • Plugin.php

对于正常使用,就已经足够了,但是不少小伙伴好奇能否用cdn加速模型的读取,因为在chrome后台上检查network的时候,模型的读取和构建是要花一定时间的,所以可否用cdn加速的确是一个比较重要的问题(其实我感觉不会快多少),在此分享我使用腾讯云对象储存+cdn加速cos的过程。

本地魔改message.js

首先将插件的压缩包解压到本地,然后进入插件文件夹中的js目录,会有这两个文件
js

用编辑器(不推荐记事本)打开message.js,大致在483行左右,可以找到如下代码

setTimeout(function(){
if(live2d_type == 0){
        loadlive2d("live2d",  message_Path+"/model/histoire/model.json");
    }else if(live2d_type == 1){
        loadlive2d("live2d",  message_Path+"/model/rem/rem.json");
    }
},1000);

"/model/histoire/model.json""/model/rem/rem.json"的第一个斜杠去掉,修改完应该变成这样

setTimeout(function(){
if(live2d_type == 0){
        loadlive2d("live2d",  message_Path+"model/histoire/model.json");
    }else if(live2d_type == 1){
        loadlive2d("live2d",  message_Path+"model/rem/rem.json");
    }
},1000);

本地魔改live2d.js

ps:如果你是想直接改好的文件那么请点击这里下载我改好的live2d.js替换掉js目录下的live2d.js即可。

因为在cdn加速的时候一直遇到Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at /path/to/texure.png may not be loaded.的蛇皮报错,在google百度stackoverflow都找了一遍的情况下,大部分的回答是webGL没有开启跨域访问,加入"crossOrigin = "Anonymous""就行了,可是在live2d.js中明明有这个代码段(请预先格式化一下,否则你看到的只是一整行神奇的代码)

    r.prototype.loadTexture = function(t, e, i, r) {
        var n = new Image;
        n.src = i,
        n.crossOrigin = "Anonymous",
        n.onload = function() {
            var i = (0, o.getContext)(),
            s = i.createTexture();
            if (!s) return console.error("Failed to generate gl texture name."),
            -1;
            0 == t.isPremultipliedAlpha() && i.pixelStorei(i.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1),
            i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL, 1),
            i.activeTexture(i.TEXTURE0),
            i.bindTexture(i.TEXTURE_2D, s),
            i.texImage2D(i.TEXTURE_2D, 0, i.RGBA, i.RGBA, i.UNSIGNED_BYTE, n),
            i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MAG_FILTER, i.LINEAR),
            i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MIN_FILTER, i.LINEAR_MIPMAP_NEAREST),
            i.generateMipmap(i.TEXTURE_2D),
            t.setTexture(e, s),
            s = null,
            "function" == typeof r && r()
        },

就在我百思不得其解的时候,html5gamedevs上的回答让我哭笑不得,原来是逻辑问题,交换一下如下两行代码即可

    n.src = i,
    n.crossOrigin = "Anonymous",

图像都接收回来了再开跨源意义在哪……
所有都做完后保存,退出,把整个插件解压出来的文件夹(修改后的)直接扔进腾讯云储存桶里面,差不多这样
menu

对象储存的准备工作就完成了。

魔改Plugin.php

打开服务器上的Plugin.php,大致在107行,有如下代码

    $Options = Helper::options()->plugin('Live2dHistoire');
    $Path = Helper::options()->pluginUrl . '/Live2dHistoire/';
    $siteUrl = Helper::options()->siteUrl;
    $live2d_type = $Options->live2d_type;

$path =后的值改为你在云储存桶上的插件目录地址即可,修改后类似
$Path = 'https://asunaimg-12316.file.myqcloud.com/Live2dHistoire/';
保存,刷新页面,现在看板娘就从云储存桶上加载了,速度应该能快个100多ms(1秒等于1000ms,如果我没记错的话)
这就完了?NONONO,我们的目的是cdn加速(储存桶),所以还要再搞搞事情

利用cdn加速储存桶读取

在次修改$path =,值修改为你cdn加速服务器上的插件目录地址,保存,刷新,你会发现你的看板娘出不来了哈哈……(逃……),在chrome调试界面的console可以看到,是跨源访问出了问题,对于个人博客之类的,只需要去你的cdn服务控制台,找到CORS跨源访问规则,添加一个通配符*,表示全部网站都可以支持跨源访问就行了.

上图中的来源origin添加一个"*"(不包含引号),操作建议前三个都勾起来,保存就可以了,接下来再刷新博客页面,看板娘就能比较快的出来了。

后话及一言接口使用方法

有些小伙伴可能运气不好,设置完后还不能正常显示,这时候需要按F12转到console选项卡,看看发生了什么,如果显示NO 'Access-Control-Allow-Origin' header is prisent on the requeseted resource,则你还需要去cdn服务器控制台页面的header设置里增加Access-Control-Allow-Origin字段,值填写你主站的名字或者是console中被拒绝访问的网址就可以了。

关于一言接口的使用,不难发现,语言主要是在plugin.php中处理的,主要是showHitokoto的这个函数,参照我的更改后的函数和原作者写的原函数自定义修改就可以了。


如果有什么问题的话可以在下方留言,我会不定时回复,poi。

最后修改:2018 年 10 月 23 日 07 : 28 PM
如果觉得我的文章对你有用,请随意赞赏

4 条评论

  1. Eric

    需要去cdn服务器控制台页面的header设置里增加Access-Control-Allow-Origin字段 这里是在哪添加的呢

    1. 星夜的蓝天
      @Eric

      例如我的是在腾讯云的控制台里。一般控制台里都有这个设置

  2. 星夜的蓝天

    如果要看板娘像本博客一样时不时说一些充满哲理的句子而不只是预设中的五句话的话可以联系本人,由于最近忙,还没有时间在写一份教程,等有时间会更新的……(๑•̀ㅁ•́ฅ)

发表评论 取消回复

召唤看板娘