对网页中图片进行翻译
使用场景
比如我有一个简体中文的网页,我把它翻译成了繁体中文,文字可以非常方便的自动进行翻译为繁体中文,但是图片中的文字却不会自动进行翻译。 这样翻译之后的网站,在访客看来,图片除了美观外不太具备有可读性。因为图片中的文字没有被翻译,访客看不懂。
本篇介绍的就是如何将图片也一并进行替换为对应语种的图片。
准备工作
网站中有显示图片的地方,比如 :
<img src="/uploads/logo.jpg" />
要针对这个图片进行翻译,比如你要使网页翻译为繁体中文时,这个图片能显示繁体中文对应的图片,你可以将这个图片进行处理,将其中的文字也换成繁体中文,然后传到网上,于是可以得到一个图片的url链接:
https://www.zvo.cn/logo.jpg
代码示例
这里提供 translate.js 可使用代码,来将图片进行更换为相应语种的图片
translate.images.add({
"/uploads/a.jpg":"https://www.zvo.cn/a_english.jpg",
"/uploads/b.jpg":"https://www.zvo.cn/b_english.jpg",
});
参数解释:
- 第一个参数,也就是上面代码中的
/uploads/a.jpg
是要进行替换的原本的图片url,也就是 img 标签中的src的值 - 第二个参数,也就是上面代码中的
https://www.zvo.cn/a_english.jpg
是要替换为的图片网址,注意要用绝对路径的
如果有多个图片需要替换,那就增加多行即可。
注意,这行要放在translate.execute();
之前。
这行代码的意思,是进行切换语言时,会自动检索当前网页中所出现的图片,将第一个参数中的图片网址,自动换为第二个参数中的图片网址,来实现翻译之后的网页,图片也会相应切换的目的。 但是这样直接写死了要切换为哪个图片,会存在你翻译为英文跟翻译为韩语,它都会给你切换为一个固定的图片,这就需要看下面的 语言变量 里的说明了,不同的语种,切换相应语种的图片。
语言变量
同一张图,不同的语种,会有不同的翻译之后的图片对应,比如我们做了英语、简体中文、法语 等图片,每个语种都单独做了一个图片,那么针对不同的语种,图片的命名方式可以使用一个变量 {language} 表示当前要显示的语种。
比如这样写:
translate.images.add({
"/uploads/a.jpg":"https://www.zvo.cn/a_{language}.jpg",
"/uploads/b.jpg":"https://www.zvo.cn/b_{language}.jpg",
});
那么当你有简体中文切换到繁体中文时,/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
时才会将图片也会一并进行翻译替换。