Unity WebGL 实战有哪些常见问题？

c0d3n4m

问题需求

今天碰到一个需求，发布webgl的工程需要把生成的数据图片下载到本地，资料也查了一些，webgl不支持I/O,所有我在内存中拿到了数据流，发现写不到本地，最后确定了一个方案，也实现了，思路大概是这样的：
  需要写个jslib脚本，来实现调取电脑浏览器的下载，把这个脚本作为unity的Plugins，需要下载文件时，用unity去调取浏览器的下载，不知道这个方案算不算是另辟蹊径的。。。。。
<hr/>一、编写jslib

上一篇也说了，unity本身不支持webgl下载，于是我就有了个想法，通过jslib来调用浏览器的下载，话不多说，下面上代码：
  ImageDownloader.jslib

//调用浏览器的下载
var ImageDownloaderPlugin = {
    ImageDownloader: function (str, fn) {
        console.log("start jslib download");
        var msg = Pointer_stringify(str);
        var fname = Pointer_stringify(fn);
        var contentType = 'image/jpeg';

        function fixBinary(bin) {
            var length = bin.length;
            var buf = new ArrayBuffer(length);
            var arr = new Uint8Array(buf);
            for (var i = 0; i < length; i++) {
                arr = bin.charCodeAt(i);
            }
            return buf;
        }
        //atob解码使用base64编码的字符串
        var binary = fixBinary(atob(msg));
        var data = new Blob([binary], { type: contentType });
        //创建一个html dom用于触发blob下载
        var link = document.createElement('a');
        link.download = fname;
        link.innerHTML = 'DownloadFile';
        link.setAttribute('id', 'ImageDownloaderLink');
        link.href = window.URL.createObjectURL(data);
        link.onclick = function () {
            var child = document.getElementById('ImageDownloaderLink');
            child.parentNode.removeChild(child);
        };
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(link.href);
    }
};
//并入Unity中，官方写法。
mergeInto(LibraryManager.library, ImageDownloaderPlugin)这个文件要放到unity 的Plugins文件夹下


<hr/>二、引入dll，编写C#脚本

直接上代码
using System.Runtime.InteropServices;
using UnityEngine;
using UnityEngine.UI;


public class DownLoadPic : MonoBehaviour
{
    /// <summary>
    /// 要下载的图片，格式为jpg
    /// </summary>
    public Sprite picture;
    /// <summary>
    /// 下载按钮
    /// </summary>
    public Button buttonDownLoad;

    [DllImport("__Internal")]
    private static extern void ImageDownloader(string str, string fn);

    /// <summary>
    /// 下载png图片
    /// </summary>
    /// <param name="imageData">字节流</param>
    /// <param name="imageFileName"></param>
    public void DownloadImage(byte[] imageData, string imageFileName)
    {
        if (imageData != null)
        {
            Debug.Log("Downloading..." + imageFileName);
            ImageDownloader(System.Convert.ToBase64String(imageData), imageFileName);
        }
    }


    private void Start()
    {
        buttonDownLoad.onClick.AddListener(OnButtonClick);
    }

    private void OnButtonClick()
    {
        byte[] photoByte = getImageSprite(); //获取jpeg图像的字节流
        if (photoByte != null)
        {
            DownloadImage(photoByte, Chevereto image hosting + ".jpg");
        }
        else
        {
            Debug.LogError("没成功啊！！");
        }
    }

    private byte[] getImageSprite()
    {
        if (picture)
        {
            return picture.texture.EncodeToJPG();
        }

        return null;
    }
}注释也比较详细，可以自己看下，需要手动拖入按钮和sprite
注意：图片格式为jpg，并且要设置成可读写


<hr/>三、最终效果



左下角已经下载下来图片了
<hr/>总结

下载其他类型可以根据这个思路自行更改。
就先讲到这里吧，好记性不如烂笔头，如果有问题可以随时联系我。
欢迎大佬多多来给萌新指正，欢迎大家来共同探讨。
**如果各位看官觉得文章有点点帮助，跪求各位给点个“一键三连”，谢啦~**
版权声明

版权声明：
所刊登的所有作品的著作权均为本人所拥有
本人保留所有法定权利,违者必究!
对于需要复制、转载、链接和传播博客文章或内容的
请及时和本人进行联系
对于经本人明确授权和许可使用文章及内容的
使用时请注明文章或内容出处并注明网址
转载请附上原文出处链接及本声明