Unity WebGL集成React游戏截图发推特：WebGL构建后无法上传图片

WebGL版本下图片上传失败，主要有以下几个核心原因及对应修复方式：

1. 错误解析Imgur的JSON响应 #

你的代码中使用XDocument.Parse解析Imgur API的响应，但Imgur返回的是JSON格式数据，而非XML。这会导致WebGL下无法正确提取图片链接，进而导致推特分享时没有图片。

修复方式： #

改用JSON解析。先定义对应的实体类：

[Serializable]
public class ImgurResponse
{
    public ImgurData data;
    public bool success;
    public int status;
}

[Serializable]
public class ImgurData
{
    public string link;
}

然后替换解析部分的代码：

if (www.result == UnityWebRequest.Result.Success)
{
    ImgurResponse response = JsonUtility.FromJson<ImgurResponse>(www.downloadHandler.text);
    uri = response.data?.link;
    // 移除后缀（改用字符串分割更稳妥，避免固定长度出错）
    if (!string.IsNullOrEmpty(uri))
    {
        uri = uri.Substring(0, uri.LastIndexOf('.'));
    }
}
else
{
    Debug.LogError($"Imgur上传失败: {www.error}, 状态码: {www.responseCode}");
}

2. WebGL下错误处理不全面 #

原代码只判断了ConnectionError，但WebGL下UnityWebRequest还可能出现ProtocolError（比如401权限错误、400请求错误）、DataProcessingError等情况，这些都会导致上传失败但未被捕获。

修复方式： #

直接判断请求是否成功，而非排除单一错误类型：

// 替换原有的错误判断逻辑
if (www.result == UnityWebRequest.Result.Success)
{
    // 解析响应逻辑
}
else
{
    Debug.LogError($"请求失败: {www.error}, 状态码: {www.responseCode}");
}

3. CORS跨域限制（WebGL特有） #

WebGL运行在浏览器中，受同源策略限制。如果你的React项目部署的域名未被Imgur API允许跨域，会导致请求被浏览器拦截。

修复方式： #

• 确认你的Imgur Client ID有效，且请求头AUTHORIZATION格式正确（Client-ID后必须有空格）
• 本地开发时，可在React的package.json中添加代理配置，转发Imgur请求避免跨域：

  "proxy": "https://api.imgur.com"
  

  之后Unity中的请求地址改为/3/image，由React代理转发请求。

4. WebGL下纹理处理潜在问题 #

ScreenCapture.CaptureScreenshotAsTexture在WebGL下生成的纹理，若未正确释放可能导致内存问题，进而影响编码或上传。

修复方式： #

在编码完成后立即销毁纹理：

Texture2D tex = ScreenCapture.CaptureScreenshotAsTexture();
byte[] jpgData = tex.EncodeToJPG();
Destroy(tex); // 及时释放纹理内存

5. 推特分享的字符串编码问题 #

原代码中直接传递%0a作为换行符，在WebGL下可能导致JS端解析异常。建议在C#中使用普通换行符，由JS端处理URL编码。

修复方式： #

C#端传递字符串：

TweetFromUnity($"Tweet Message\n{uri}");

对应的JS实现中处理编码：

function TweetFromUnity(rawMessage) {
    const encodedMessage = encodeURIComponent(rawMessage);
    window.open(`https://twitter.com/intent/tweet?text=${encodedMessage}`, '_blank');
}

完整修复后的核心代码片段 #

using System;
using System.Collections;
using UnityEngine;
using UnityEngine.Networking;
#if !UNITY_EDITOR && UNITY_WEBGL
using System.Runtime.InteropServices;
#endif

[Serializable]
public class ImgurResponse
{
    public ImgurData data;
    public bool success;
    public int status;
}

[Serializable]
public class ImgurData
{
    public string link;
}

public class TweetWithScreenShot : MonoBehaviour
{
    [SerializeField] private string _imgurClientId;

#if !UNITY_EDITOR && UNITY_WEBGL
    [DllImport("__Internal")]
    private static extern void TweetFromUnity(string rawMessage);
#endif

    public void TweetWithScreenshot()
    {
        StartCoroutine(TweetWithScreenshotCo());
    }

    private IEnumerator TweetWithScreenshotCo()
    {
        yield return new WaitForEndOfFrame();

        Texture2D tex = ScreenCapture.CaptureScreenshotAsTexture();
        byte[] jpgData = tex.EncodeToJPG();
        Destroy(tex); // 及时释放纹理

        var wwwForm = new WWWForm();
        wwwForm.AddField("image", Convert.ToBase64String(jpgData));
        wwwForm.AddField("type", "base64");

        UnityWebRequest www = UnityWebRequest.Post("https://api.imgur.com/3/image", wwwForm);
        www.SetRequestHeader("AUTHORIZATION", "Client-ID " + _imgurClientId);

        yield return www.SendWebRequest();

        var uri = "";

        if (www.result == UnityWebRequest.Result.Success)
        {
            ImgurResponse response = JsonUtility.FromJson<ImgurResponse>(www.downloadHandler.text);
            uri = response.data?.link;
            
            if (!string.IsNullOrEmpty(uri))
            {
                uri = uri.Substring(0, uri.LastIndexOf('.'));
            }
            Debug.Log($"Imgur链接: {uri}");
#if !UNITY_EDITOR && UNITY_WEBGL
            TweetFromUnity($"Tweet Message\n{uri}");
#endif
        }
        else
        {
            Debug.LogError($"Imgur上传失败: {www.error}, 状态码: {www.responseCode}");
        }
    }
}

内容的提问来源于stack exchange，提问作者BlackDragon94