如果删除不相关的脚本，使用 html canvas 生成的 iPhone 图像会被裁剪

发布于 2024-12-10 00:25:46 字数 1935 浏览 1 评论 0原文

我正在尝试在 iPhone 上查看使用 html5 画布生成的图像。

浏览器页面检测到 iPhone，然后重定向到 iPhone 特定页面。图像显示正确。

现在问题来了。 iPhone 页面是浏览器页面的精简版本。当将其剥离回来时，我发现当我从页面中删除 2 个完全不相关的脚本时，图像在 iPhone 上显示为被裁剪（图像的底部显示为被裁剪）。只是为了确定。我用其他脚本替换了这些脚本。无论涉及什么脚本，当存在 2 个脚本时，图像都会正确显示。

我还发现，如果直接加载（不重定向）没有脚本的 iPhone 页面，图像将正确显示。 只有当从浏览器页面重定向到没有脚本的 iPhone 页面时，它才不起作用。重新加载 iPhone 页面也会显示图像正确。

顺便说一句，当我将手机的方向更改为横向并返回时，我注意到类似的裁剪效果，但我不确定这是否相关。

我猜测裁剪与生成画布时有关，但我不确定。这让我很困惑。

无论如何，这是 iphone 页面的代码。

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

      <title>canvas image thingy majig</title>
            <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
            <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
            <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link type="text/css" href="/iphone.css" rel="stylesheet" />
<link type="text/css" href="/style.css" rel="stylesheet" />
      <script type="text/javascript" src="/MOB.js"> </script>
</head>
<body onload="init();">

      <section id="drawingArea">
            <canvas id="canvas"> </canvas>      
      </section>      
                            <input class="reset" type="button" value="Clear" onClick="window.location.reload()">


                                    <script type="text/javascript" src="/cmmn/sclbkmk.js"></script>
                                    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 

</body>
</html>

有谁对出了什么问题有任何想法吗？

编辑：仅供参考，我使用的是固件版本为 4.1(8B117) 的 iPhone 4。

原文

I am trying to view an image on the iphone that is generated using the html5 canvas.

The browser page detects the iphone then redirects to the iphone specific page.
The image is displayed properly.

Now here is the problem.
The iphone page is a stripped back version of the browser page. When stripping it back I found that when I removed 2 completely unrelated scripts from the page, the image appeared cropped on the iphone (the bottom of the image appeared cropped.) Just to be sure. I substituted the scripts with other scripts. Regardless of the scripts involved, when 2 scripts were present the image would display properly.

I also found that if the iphone page without the scripts was loaded directly (not redirected) the image displayed correctly. It was only when redirected from the browser page to the iphone page without the scripts that it didn't work. Reloading the iphone page also displayed the image correctly.

Incidentally, I've noticed a similar cropping affect when I change the orientation of the phone to landscape and back but I'm not sure if this is related at all.

I'm guessing the cropping has something to do with when the canvas is generated, but I'm not sure. This has me pretty stumped.

Anyway, here is the code for the iphone page.

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

      <title>canvas image thingy majig</title>
            <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
            <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
            <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link type="text/css" href="/iphone.css" rel="stylesheet" />
<link type="text/css" href="/style.css" rel="stylesheet" />
      <script type="text/javascript" src="/MOB.js"> </script>
</head>
<body onload="init();">

      <section id="drawingArea">
            <canvas id="canvas"> </canvas>      
      </section>      
                            <input class="reset" type="button" value="Clear" onClick="window.location.reload()">


                                    <script type="text/javascript" src="/cmmn/sclbkmk.js"></script>
                                    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 

</body>
</html>

Does anyone have any ideas about what is going wrong?

EDIT: Just for reference I was using an iphone 4 with firmware version 4.1(8B117).

分享到QQ

分享到微博