嵌入在 HTML 表单中的图像无法在基于 iOS 的设备上显示

如何解决嵌入在 HTML 表单中的图像无法在基于 iOS 的设备上显示

我在 Google 协作平台的嵌入式代码字段中使用了以下代码来在我的网站上显示图像，在我的 Windows、Linux 和 Android 设备上一切正常，但它们没有显示在 iPhone 上（无论是使用 Chrome 或 Safari）！

<form name="submit-to-google-sheet">
   <img id="img1" width=163 height=227>
</form>

<script>
    const img1 = document.getElementById('img1');
    img1.src = "https://docs.google.com/uc?export=view&id={imageGoogleDriveID}";
</script>

一些上下文/限制条件：我正在从我的 Google Drive 中提取我的图像。它们是 ~80kb JPEG。我正在使用 HTML 表单，因为我有其他元素（按钮、字段），我已从下面的代码摘录中删除了这些元素，以关注该问题。我需要保留这张表格。

我探索了 Base64 格式，它允许在 iOS 操作的设备上显示图像（或者我理解）。如果我只是将图像源设置为 Base64 URI，它就可以工作：

imgBase64.src = "data:image/jpeg;base64,/9j/4 [...] //9k=";

但我无法像 JPEG 一样方便地从 Drive 调用 Base64 文件。我正在处理 250 多个图像，所以我不能在代码中间使用 base64 字符串，因为它太大而无法使用。

我想出了下面的一段代码，我最终得到：

在 Android/Windows 上：img1 的漂亮图像和 imgBase64 的简单黑色方块
在 iOS 上：img1 的空框（首先是我的问题）和一个简单的黑色方块 imgBase64

经过调查，我从 canvas.toDataURL("image/jpeg") 中得到的 URI 似乎与我从编码器（例如 base64.guru/converter/encode/url）中得到的完全不同。它很短，我得到了很多 A。似乎画布没有正确加载图像：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCADjAKMDAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJ/4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//Z

知道为什么转换不起作用吗？

<form name="myForm">
  <img id="img1" width=163 height=227>
  <img id="imgBase64" width=163 height=227>
</form>

<script>
const form = document.forms['myForm'];

var imageUrl = "https://docs.google.com/uc?export=view&id={imageGoogleDriveID}";

const img1 = document.getElementById('img1');
img1.src=imageUrl;

const imgBase64 = document.getElementById('imgBase64');

const canvas = document.createElement("canvas");
canvas.width = 163;
canvas.height = 227;

img1.onload = function() {
canvas.getContext("2d").drawImage(img1,0);
}

var dataURL = canvas.toDataURL("image/jpeg");

imgBase64.src = dataURL; //gives me a black square

imgBase64.src = "data:image/jpeg;base64,/9j/4 [...] //9k="; //works fine!

</script>

解决方法

我们刚刚找到了适用于 iOS 的修复程序：当第三方 cookie 和跨站点跟踪被阻止时，图像不会加载。 here 解释了要切换的设置。

Base64 不是解决方案，因为问题来自从我的 Google Drive 中提取图像，即与我的网站不同的域。但是我仍然没有找到为什么 drawImage() 不起作用。