QUX主题生成海报功能使用外链图片无法生成的解决办法

因为搬主题使用的是QUX主题,默认主题带了一个生成海报的功能,也就是每个文章后面点击生成海报按钮的话,会自动生成一个海报页面,视觉效果还不错。但是该功能只适合图片放在自己服务器上的,对于搬主题这种动静分离,使用外链图片的站点来说,点击生成海报功能,则直接报错无法显示。经过搬主题一番测试研究,终于将问题解决。这里就分享一下QUX主题生成海报功能使用外链图片无法生成的解决办法。

一、如何开启生成海报功能

WordPress的后台菜单,点击【主题设置】,点击【基本】选项,然后下拉找到“自定义分享功能 (v9.1.5+)”,如果勾选则为设置自定义分享的代码,如果不勾选则默认显示默认的功能,也就是在每篇文章后面显示生成海报功能。

记住,不要勾选,如下图

QUX主题生成海报功能使用外链图片无法生成的解决办法插图

然后文章会自动显示生成海报功能,如下图

QUX主题生成海报功能使用外链图片无法生成的解决办法插图1

二、使用外链图片报错呈现

一般我们WordPress站点喜欢使用外链图片,比如对象存储,这样可以动静分离加快WordPress站点的加载,但是这样的话,点击生成海报功能则无法生成显示,同时浏览器会提示出错

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

大概的意思是使用Canvas工具进行合成图片的时候,因为跨域问题,因此无法正常使用,因此报错。

三、跨域问题的解决办法

网上的办法非常多,基本都说是跨域问题,直接添加跨域设置后就行了。关于这点,搬主题进行了N次尝试,但都无法正常显示,后来经过不断试错才解决。解决办法如下:

1、先进行图片源站的跨域设置

这里涉及各个图片的外链源站的跨域设置,搬主题就不一一介绍了,以各种对象存储为例,参考搬主题前期的文章。

2、打开主题文件夹下的poster.js文件

这里是QUX主题,默认的路径为 qux\js\libs 文件夹下。

打开后,先搜索如下代码

var image = new Image();

代码应该在82行,然后在其下面另起一行,插入代码 image.crossOrigin = 'anonymous'; 如下图显示

QUX主题生成海报功能使用外链图片无法生成的解决办法插图2

接下来再搜索如下代码

var log = new Image();

代码应该在112行,然后在其下面另起一行,插入代码 log.crossOrigin = 'anonymous'; 如下图显示

QUX主题生成海报功能使用外链图片无法生成的解决办法插图3

接下来再搜索如下代码

var qrcode = new Image();

代码应该在121行,然后在其下面另起一行,插入代码 qrcode.crossOrigin = 'anonymous'; 如下图显示

QUX主题生成海报功能使用外链图片无法生成的解决办法插图4

接下来再搜索如下代码

var img = new Image();

代码应该在130行,然后在其下面另起一行,插入代码 img.crossOrigin = 'anonymous'; 如下图显示

QUX主题生成海报功能使用外链图片无法生成的解决办法插图5

然后保存,上传poster.js文件文件即可。

最终的生成海报的显示效果如下图

QUX主题生成海报功能使用外链图片无法生成的解决办法插图6

 收藏 (1) 更新不易,打赏吧

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《QUX主题生成海报功能使用外链图片无法生成的解决办法》
文章链接:https://www.banzhuti.com/qux-generate-poster-picture-cors.html
分享到: 生成海报
版权免责声明

① 本站提供的资源(插件或主题)均为网上搜集,如有涉及或侵害到您的版权请立即通知我们。
② 本站所有下载文件,仅用作学习研究使用,请下载后24小时内删除,支持正版,勿用作商业用途。
③ 因代码可变性,不保证兼容所有浏览器、不保证兼容所有版本的WP、不保证兼容您安装的其他插件。
④ 本站保证所提供资源(插件或主题)的完整性,但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
⑤ 由本站提供的资源对您的网站或计算机造成严重后果的本站概不负责。
⑥ 使用该资源(插件或主题)需要用户有一定代码基础知识!另本站提供汉化使用安装教程,仅供参考。
⑦ 有时可能会遇到部分字段无法汉化,同时请保留作者汉化宣传信息,谢谢!
⑧ 本站资源售价只是赞助和汉化辛苦费,收取费用仅维持本站的日常运营所需。
⑨ 如果喜欢本站资源,欢迎捐助本站开通会员享受优惠折扣,谢谢支持!
⑩ 如果网盘地址失效,请在相应资源页面下留言,我们会尽快修复下载地址。

热门文章

评论 抢沙发

评论前必须登录!

立即登录   注册

WordPress主题 插件 建站 汉化

定制服务联系我们
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活