火山引擎ImageX图片服务纯代码使用方法额度领取

目前，字节跳动旗下火山引擎也推出了图片处理服务功能即ImageX图片服务，ImageX图片服务类似于七牛图片处理，即可以作为图床分发图片，缓解源站压力，而且也可以实时对图片进行处理，只需要在图片结尾添加图片处理样式即可，比七牛更加吸引人的是ImageX图片服务免费额度支持https！

点击注册ImageX图片服务（该链接为专属推广链接，然而也并不会因为这个链接享受更多权益，只能看到是经我的链接注册的）

字节跳动旗下火山引擎ImageX图片服务纯代码使用方法免费额度领取

一、ImageX图片服务免费额度

与七牛图片处理及融合CDN类似，ImageX图片服务的免费额度：

1、图片资源存储服务10G免费额度

2、图片分发即图片CDN服务有两种计算方式，一种按流量计算，与七牛相同都是每月10G免费额度；另一种是按带宽计算，该方式没有免费额度，但是价格还是相当优惠的（有免费额度当然使用免费的了！）

3、基础图像处理服务，每月有20T数据处理量为免费。

具体计价方式请参阅官方文档：ImageX服务报价

而且更加难能可贵的是，ImageX图片服务免费额度支持SSL！现在几乎所有的网站都启用了小绿锁，而七牛图片处理免费额度是不支持https的，所以大家可以试试ImageX图片服务，对于个人小网站免费额度完全够用了！

二、ImageX图片服务使用方法

ImageX图片服务的注册、开通等不再赘述。

（一）ImageX图片服务插件

ImageX图片服务已经推出有一段时间了，很多优秀开发者已经针对ImageX图片服务开发出了不同程序的插件，例如WordPress、webpack、Laravel、ThinkPHP等程序。

各插件请参阅：ImageX图片服务插件 

插件作者：沈唁志

各ImageX图片服务插件均有详细文档，依照文档说明进行配置即可。

（二）ImageX图片服务纯代码配置

由于本人在使用ImageX WordPress插件的时候无法对已有图片附件同步至ImageX图片服务存储（各WordPress主题不同，已有图片附件无法同步可能只是个例，大家请自行测试），所以采用了镜像回源的方法进行配置。通过这种方法即可以少装一个WordPress插件，又可以对已有的图片进行同步，更加便捷一些。

1、ImageX图片服务后台上传证书

需要注意的是，ImageX图片服务自身并没有SSL证书，需要自行申请证书后在后台上传启用。

ImageX图片服务上传证书

2、在ImageX图片服务后台新建服务。

根据提示填写相关信息即可，在绑定域名的后面有选择证书，启用后便可以支持SSL（包含在免费额度内）

 

新建ImageX图片服务

新建ImageX图片服务后火山引擎后台需要审核（我也不知道他们到底是要审核什么东东），提示说需要一个工作日，但是实际上如果是在工作时间新建服务的话，审核还是挺快的。

新建ImageX图片服务审核

3、审核通过后会给出CNAME值，将域名解析到该CNAME即可。

ImageX图片服务审核通过

4、点击基础配置对ImageX进行镜像回源配置

ImageX镜像回源配置

5、ImageX图片处理配置（可选）

部分主题与ImageX图片处理有冲突，可能会对图片灯箱效果造成影响。请大家自行测试。

ImageX图片处理配置

点击图片处理编辑或者新建模板根据提示操作即可。

以上，ImageX图片服务后台的操作已经全部完成，剩余的便是在WordPress后台对ImageX图片服务进行对接即可，与七牛等图床使用类似。

6.1、使用ImageX插件进行配置

这是最简单的方法了，将ImageX图片服务后台的各项参数填写到ImageX插件即可，插件作者的文档以及插件后台的提示很明了，参照配置即可。

6.2、使用已有CDN插件

大家网站应该都启用了CDN并且装有CDN插件，如果网站有其他CDN插件如WP Super Cache，只需要在CDN映射设置中填写ImageX图片服务的域名，然后选择需要映射的文件类型即可。

ImageX cdn配置

其他插件可参考配置，例如litespeed的配置为：

ImageX cdn配置

至此，所有的基础配置已经完成，可以在刷新缓存后测试一下网站首页，网站图片是否已经通过imageX进行分发，同时也可以查看imageX后台，是否在图片资源管理中已有同步的图片。

需要注意的是，由于采用镜像回源方案，所以图片不会立刻全部同步到imageX资源中，而是在访问网站时，如果imageX没有图片资源，才会从网站中进行拉取然后再返回给用户，这就导致在首次访问的时候资源会比较慢一些。

imageX镜像同步

至此，imageX图片服务的存储、分发功能已全部配置完毕。但是imageX还有免费图片处理额度，免费的不用总感觉很浪费啊！

7、添加imageX图片处理功能

imageX插件中是有imageX图片处理功能的，所以通过学习、借鉴、参考（查看抄袭）imageX插件代码，将imageX插件的图片处理功能摘抄出来了，将该段代码添加到function.php的尾部即可：

// 添加火山引擎图片处理代码
add_filter('the_content', 'imagex_setting_content_ci');
function imagex_setting_content_ci($content)
{



preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $images);
if (!empty($images) && isset($images[1])) {
foreach ($images[1] as $item) {

$content = str_replace($item, $item . '~tplv-vk860eov9l-image.webp', $content);

}
}

return $content;
}

add_filter('post_thumbnail_html', 'imagex_setting_post_thumbnail_ci', 10, 3);
function imagex_setting_post_thumbnail_ci( $html, $post_id, $post_image_id )
{

if (has_post_thumbnail()) {
preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $html, $images);
if (!empty($images) && isset($images[1])) {
foreach ($images[1] as $item) {

$html = str_replace($item, $item . '~tplv-vk860eov9l-image.webp', $html);

}
}
}
return $html;
}

实际上，imageX自带有图片处理功能，上述代码只是将imageX图片处理的模板样式自动添加到了图片外链地址的后缀，因此实现了图片处理的功能。即：

imageX图片处理链接

如上文所述，由于添加图片处理样式后与主题灯箱效果冲突，所以我只是在缩略图使用了imageX图片处理（即第二段代码），而在文章中的图片并没有使用imageX图片处理（即第一段代码）。