时间戳

首页 > 解决方案 > 嵌入在 HTML 表单中的图像未在基于 iOS 的设备上显示

javascript - 嵌入在 HTML 表单中的图像未在基于 iOS 的设备上显示

问题描述

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

<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>

一些背景/限制：我从我的谷歌驱动器中提取我的图像。它们是 ~80kb JPEG。我正在使用 HTML 表单，因为我已经从下面的代码摘录中删除了其他元素（按钮、字段）以专注于该问题。我需要保留这个表格。

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

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

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

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

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

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, 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>

标签： javascriptformscanvasbase64drawimage

解决方案

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

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

推荐阅读