对网页中图片进行翻译

使用场景

比如我有一个简体中文的网页,我把它翻译成了繁体中文,文字可以非常方便的自动进行翻译为繁体中文,但是图片中的文字却不会自动进行翻译。 这样翻译之后的网站,在访客看来,图片除了美观外不太具备有可读性。因为图片中的文字没有被翻译,访客看不懂。
本篇介绍的就是如何将图片也一并进行替换为对应语种的图片。

准备工作

网站中有显示图片的地方,比如 :

  1. <img src="/uploads/logo.jpg" />

要针对这个图片进行翻译,比如你要使网页翻译为繁体中文时,这个图片能显示繁体中文对应的图片,你可以将这个图片进行处理,将其中的文字也换成繁体中文,然后传到网上,于是可以得到一个图片的url链接:

  1. https://www.zvo.cn/logo.jpg

代码示例

这里提供 translate.js 可使用代码,来将图片进行更换为相应语种的图片

  1. translate.images.add({
  2. "/uploads/a.jpg":"https://www.zvo.cn/a_english.jpg",
  3. "/uploads/b.jpg":"https://www.zvo.cn/b_english.jpg",
  4. });

参数解释:

这行代码的意思,是进行切换语言时,会自动检索当前网页中所出现的图片,将第一个参数中的图片网址,自动换为第二个参数中的图片网址,来实现翻译之后的网页,图片也会相应切换的目的。 但是这样直接写死了要切换为哪个图片,会存在你翻译为英文跟翻译为韩语,它都会给你切换为一个固定的图片,这就需要看下面的 语言变量 里的说明了,不同的语种,切换相应语种的图片。

语言变量

同一张图,不同的语种,会有不同的翻译之后的图片对应,比如我们做了英语、简体中文、法语 等图片,每个语种都单独做了一个图片,那么针对不同的语种,图片的命名方式可以使用一个变量 {language} 表示当前要显示的语种。
比如这样写:

  1. translate.images.add({
  2. "/uploads/a.jpg":"https://www.zvo.cn/a_{language}.jpg",
  3. "/uploads/b.jpg":"https://www.zvo.cn/b_{language}.jpg",
  4. });

那么当你有简体中文切换到繁体中文时,/uploads/logo.jpg 这个图片会自动被替换为 https://www.zvo.cn/logo_chinese_simplified.jpg ,当你切换到英语时,图片会自动被替换为 https://www.zvo.cn/logo_english.jpg
这样你只需要制作不同语种的图片,并将其针对不同的语种进行命名上传即可。
用 {language} 来表示当前翻译为的语种,有关{language}的取值,可查阅 http://api.zvo.cn/translate/service/20230807/language.json.html 其中的语言标识id便是

其他说明

在执行了 translate.images.add 进行追加要翻译替换的图片规则后,你也可以手动执行 translate.images.execute() 来进行执行图片替换。当然这行只会进行翻译的图片替换而已。 它默认是集成到了 translate.execute 这个方法中的,所以当执行 translate.execute 时才会将图片也会一并进行翻译替换。