• unity（WebGL） 截图拼接并保存本地，下载PDF

    目录

    1.调用代码

    2.截图 拼图 代码

    截图参考：Unity3D 局部截图、全屏截图、带UI截图三种方法_unity 截图_野区捕龙为宠的博客-CSDN博客

    文档下载： Unity WebGL 生成doc保存到本地电脑_unity webgl 保存文件_野区捕龙为宠的博客-CSDN博客

    中文输入：Unity WebGL中文输入 支持输入法跟随 支持全屏（内附Dome）_unity中文插件-CSDN博客 

    1.调用代码

    话不多说直接上代码：

    1.  private void Awake()
    2.     {
    3. //点击提交下载 按钮
    4.         Btn_download.onClick.AddListener(() =>
    5.         {
    6.             Btn_download.gameObject.SetActive(value: false);
    7.  
    8.             GetComponent<Capture_Long>().Cap_LongTex();//截图拼图
    9. //下载PDF
    10.             GetComponent<Capture_Long>().CapCallBack = ((png_byte) =>
    11.             {
    12.                 string filename = CQOOC.Instance.userName + "_" + DateTime.Now.ToString("g");
    13.                 Btn_download.gameObject.SetActive(true);
    14.                 Application.ExternalCall("downloadPng", png_byte, filename);//调用 webgl 方法
    15.  
    16.               //  Debug.Log("filename="+ filename);
    17.             });
    18. //上传 截图
    19.             GetComponent<Capture_Long>().CapByteCallBack = ((png_byte) =>
    20.             {
    21.                 string filename = CQOOC.Instance.userName + "_" + DateTime.Now.ToString("g");
    22.                 Debug.Log("filename=" + filename);
    23.                 //上传实验报告 截图
    24.                 CQOOC.Instance.UploadFile(png_byte, filename+".png", ((b) => {
    25.                     if (b)
    26.                     {
    27.                         Debug.Log("上传截图成功！");
    28.                     }
    29.                     else
    30.                     {
    31.                         Debug.Log("上传截图失败！");
    32.                     }
    33.                 }));
    34.  
    35.                 //上传实验报告 数据
    36.                 CQOOC.Instance.UploadData_((b) => {
    37.                     if (b)
    38.                     {
    39.                         UITipDialogMini.Instance.SetState(true, "提交数据成功！");
    40.                     }
    41.                     else
    42.                     {
    43.                         UITipDialogMini.Instance.SetState(true, "提交数据失败！");
    44.                     }
    45.                 });
    46.  
    47.             });
    48.         });
    49.         DateTime now = DateTime.Now.AddMinutes(-15);
    50.         string formattedTime = now.ToString("yyyy 年 M 月 d 日 HH:mm:ss");
    51.         text_StartTime.text = formattedTime;
    52.  
    53.         DateTime now02 = DateTime.Now;
    54.         string formattedTime02 = now02.ToString("yyyy 年 M 月 d 日 HH:mm:ss");
    55.         text_EndTime.text = formattedTime02;
    56.  
    57.         // text_StartTime.text = DateTime.Now.AddMinutes(-15).ToString("F");
    58.         //text_EndTime.text = DateTime.Now.ToString("F");
    59.  
    60.         text_UserName.text = CQOOC.Instance.userName;
    61.         text_Score.text = UnityEngine.Random.Range(80f, 95f).ToString("0");
    62.     }
    63.

     

    2.截图 拼图 代码

    由于图片太长需要拼接

    1. using System;
    2. using System.Collections;
    3. using UnityEngine;
    4. using UnityEngine.UI;
    5.  
    6. public class Capture_Long : MonoBehaviour
    7. {
    8.     public RectTransform svrt;
    9.     public RectTransform contentRT;
    10.     public Action<string> CapCallBack;
    11.     public Action<byte[]> CapByteCallBack;
    12.     public Vector2 vec;
    13.  
    14.     /// <summary>
    15.     /// 接长图，进行拼接
    16.     /// </summary>
    17.     /// <param name="SVRT">Scroll Rect</param>
    18.     /// <param name="ContentRT">Content</param>
    19.     public void Cap_LongTex()
    20.     {
    21.         StartCoroutine(Cap(svrt, contentRT));
    22.     }
    23.     private IEnumerator Cap(RectTransform SVRT, RectTransform ContentRT)
    24.     {
    25.         //画布中的高度      950
    26.         float SV_Y = SVRT.sizeDelta.y;
    27.  
    28.         //content显示的区域高度   0
    29.         float Content_Y = ContentRT.anchoredPosition.y;
    30.         //图片的整体高度   2660
    31.         float Content_Height = contentRT.sizeDelta.y+ SV_Y;
    32.  
    33.         var mult = (float)(Content_Height / SV_Y);
    34.         //整数倍
    35.         int mult_int = (int)mult;
    36.         //最后的小数倍
    37.         float mult_float = mult - mult_int;
    38.  
    39.         //滚动条的宽度
    40.         float verticalScrollbar_weight = SVRT.GetComponent<ScrollRect>().verticalScrollbar.GetComponent<RectTransform>().sizeDelta.x;
    41.  
    42.         yield return new WaitForEndOfFrame();
    43.  
    44.         //合成图片的总高度
    45.         int totalHeight = (int)Content_Height;
    46.         Texture2D endTex = new Texture2D((int)vec.y, totalHeight, TextureFormat.RGBA32, false);
    47.         int x = 0, y = 0;
    48.         Color32[] colors;
    49.  
    50.         //整数倍的截图
    51.         for (int i = 0; i < mult_int; i++)
    52.         {
    53.             ContentRT.anchoredPosition = new Vector2(0, SV_Y * i);
    54.             yield return new WaitForEndOfFrame();
    55.             //Rect rect_int = new Rect(Screen.width / 2 - SVRT.sizeDelta.x / 2 + SVRT.anchoredPosition.x, Screen.height / 2 - SVRT.sizeDelta.y / 2 + SVRT.anchoredPosition.y, SVRT.sizeDelta.x - verticalScrollbar_weight, SVRT.sizeDelta.y);
    56.             //Rect rect_int = new Rect(420, 166.5f, 1365, SVRT.sizeDelta.y);
    57.             Rect rect_int = new Rect(420, vec.x, vec.y, SVRT.sizeDelta.y);
    58.  
    59.             var tex_int = CaptureScreenshot(rect_int, i + "");
    60.  
    61.             //合成
    62.             colors = tex_int.GetPixels32(0);
    63.             if (i > 0)
    64.             {
    65.                 y -= tex_int.height;
    66.             }
    67.             else
    68.             {
    69.                 y = totalHeight - tex_int.height;
    70.             }
    71.             endTex.SetPixels32(x, y, tex_int.width, tex_int.height, colors);
    72.         }
    73.  
    74.         //小数倍的截图
    75.         ContentRT.anchoredPosition = new Vector2(0, SV_Y * (mult - 1));
    76.         yield return new WaitForEndOfFrame();
    77.         //Rect rect_float = new Rect(Screen.width / 2 - SVRT.sizeDelta.x / 2 + SVRT.anchoredPosition.x, Screen.height / 2 - SVRT.sizeDelta.y / 2 + SVRT.anchoredPosition.y, SVRT.sizeDelta.x - verticalScrollbar_weight, SVRT.sizeDelta.y * mult_float);
    78.         Rect rect_float = new Rect(420, vec.x, vec.y, SVRT.sizeDelta.y * mult_float);
    79.  
    80.         var tex_float = CaptureScreenshot(rect_float, "end");
    81.  
    82.         //合成
    83.         colors = tex_float.GetPixels32(0);
    84.         y -= tex_float.height;
    85.         endTex.SetPixels32(x, y, tex_float.width, tex_float.height, colors);
    86.         endTex.Apply();
    87.         byte[] bytes = endTex.EncodeToPNG();//然后将这些纹理数据，成一个png图片文件
    88.         var strPng = Convert.ToBase64String(bytes);
    89.  
    90. #if UNITY_EDITOR
    91.         string filename = Application.dataPath + "/PNG/合成.png";
    92.         System.IO.File.WriteAllBytes(filename, bytes);
    93.         Debug.Log(string.Format("截屏了一张图片: {0}", filename));
    94. #endif
    95.  
    96.         SVRT.GetComponent<ScrollRect>().verticalNormalizedPosition = 1;
    97.         CapCallBack?.Invoke(strPng);
    98.  
    99.         CapByteCallBack?.Invoke(bytes);
    100.     }
    101.  
    102.     /// <summary>
    103.     /// 开始截图
    104.     /// </summary>
    105.     /// <returns>The screenshot2.</returns>
    106.     /// <param name="rect">Rect.截图的区域，左下角为o点</param>
    107.     private Texture2D CaptureScreenshot(Rect rect, string name)
    108.     {
    109.         //Debug.Log(rect.ToString());
    110.         Texture2D screenShot = new Texture2D((int)rect.width, (int)rect.height, TextureFormat.RGBA32, false);//先创建一个的空纹理，大小可根据实现需要来设置
    111.         screenShot.ReadPixels(rect, 0, 0);//读取屏幕像素信息并存储为纹理数据，
    112.         screenShot.Apply();
    113.  
    114. #if UNITY_EDITOR
    115.         byte[] bytes = screenShot.EncodeToPNG();//然后将这些纹理数据，成一个png图片文件
    116.         string filename = Application.dataPath + "/PNG/Screenshot" + name + ".png";
    117.         System.IO.File.WriteAllBytes(filename, bytes);
    118.         //Debug.Log(string.Format("截屏了一张图片: {0}", filename));
    119. #endif
    120.         return screenShot;
    121.     }
    122. }

    3.web端代码

    1. <!DOCTYPE html>
    2. <html lang="en-us">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6.     <title>XiaoLuoDai</title>
    7.     <link rel="shortcut icon" href="TemplateData/favicon.ico">
    8.     <link rel="stylesheet" href="TemplateData/style.css">
    9.     <script src="TemplateData/UnityProgress.js"></script>
    10.     <script src="Build/UnityLoader.js"></script>
    11.     <script>
    12. 	
    13.       var unityInstance = UnityLoader.instantiate("unityContainer", "Build/WebGL.json", {onProgress: UnityProgress});
    14. 	  
    15. 	   function GetWebGLURI()
    16.         {
    17.         unityInstance.SendMessage("CQOOC", "GetURI_CallBack", window.location.href);
    18.         }
    19.     </script>
    20. 	 <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
    21. 	<script>
    22. 	  function downloadPng(base64, filename) {
    23. 	      var baseData = 'data:image/png;base64,' + base64
    24. 	          ///
    25. 	          // 获取图片文件的宽高
    26. 	          ///
    27. 	          let image = new Image();
    28. 	      image.src = baseData;
    29. 	      image.onload = function () {
    30. 	          console.log(image.width, image.height);
    31. 	          var contentWidth = image.width;
    32. 	          var contentHeight = image.height;
    33.  
    34. 	          //一页pdf显示html页面生成的canvas高度;
    35. 	          var pageHeight = contentWidth / 592.28 * 841.89;
    36. 	          //未生成pdf的html页面高度
    37. 	          var leftHeight = contentHeight;
    38. 	          //页面偏移
    39. 	          var position = 0;
    40. 	          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    41. 	          var imgWidth = 595.28;
    42. 	          var imgHeight = 592.28 / contentWidth * contentHeight;
    43. 	          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    44. 	          //当内容未超过pdf一页显示的范围，无需分页
    45.  
    46. 	          var pdf = new jsPDF('', 'pt', 'a4');
    47. 	          if (leftHeight < pageHeight) {
    48. 	              pdf.addImage(baseData, 'PNG', 0, 0, imgWidth, imgHeight);
    49. 	          } else {
    50. 	              while (leftHeight > 0) {
    51. 	                  pdf.addImage(baseData, 'PNG', 0, position, imgWidth, imgHeight)
    52. 	                  leftHeight -= pageHeight;
    53. 	                  position -= 841.89;
    54. 	                  //避免添加空白页
    55. 	                  if (leftHeight > 0) {
    56. 	                      pdf.addPage();
    57. 	                  }
    58. 	              }
    59. 	          }
    60. 	          pdf.save(filename + ".pdf")
    61. 	      }
    62. 	  }
    63. 	</script>
    64. <script>
    65.       function FullScreenMetthod()//中文输入
    66. 	  {
    67. 		document.getElementById('unityContainer').requestFullscreen();
    68. 	  }
    69.   </script>
    70.   </head>
    71.   <body>
    72.     <div class="webgl-content">
    73.       <div id="unityContainer" style="width: 1920px; height: 1080px"></div>
    74.       <div class="footer">
    75.         <div class="webgl-logo"></div>
    76.         <div class="fullscreen" onclick="FullScreenMetthod()"></div>
    77.         <div class="title">XiaoLuoDai</div>
    78.       </div>
    79.     </div>
    80.   </body>
    81. </html>

  • 相关阅读:
    【FPGA图像融合】基于vivado HLS的图像融合算法的FPGA实现
    YOLOv8改进实战 | 更换主干网络Backbone之PoolFormer篇
    网络基础—网关、网段、子网掩码
    最优控制问题中的折扣因子
    物联网网关硬件和云端分别实现了哪些功能？-天拓四方
    Netty架构详解
    常用（闭源、开源）关系型数据库架构和实现原理
    主流开发语言和开发环境介绍
    栈&队列OJ练习题(C语言版)
    Nginx 安装第三方模块 不停机 平滑升级 方法2
  • 原文地址：https://blog.csdn.net/qq_37524903/article/details/133855092