我的網頁需要能夠將影像保存到用戶的設備，無論他們從什么設備或網路瀏覽器查看。該影像是由網頁本身創建的，因此我需要使用 img 元素、canvas 元素或僅使用影像的 base64 資料（任何都可以）。我已經設法找到適用于 Android 設備和 PC 的技術，但我還沒有找到一種適用于 iPhone（尤其是在 Safari 上）的技術。這是我嘗試過的：
方法一：通過錨元素下載
在單擊時下載影像的頁面上創建一個錨元素：
<a download="myImage.png" href="data:image/png;base64,[base64-data-here]">Click me</a>
適用于 PC 和 Android。但在 iPhone 上，會出現一個彈出視窗，詢問用戶是否要下載影像。如果您按“下載”，似乎什么也沒有發生。如果它確實下載了影像，則它不會出現在照片應用程式中。
方法二：.save()P5JS圖形物件上的方法
我正在使用 P5JS 庫，它具有特殊的圖形物件（基本上只是畫布 DOM 元素的包裝器），帶有一個 .save() 方法，可以將影像保存到用戶的檔案系統：
myGraphicsObject.save("myImage.png")
這似乎只有一半的時間在 iPhone 上有效。有一半的時間它似乎根本沒有做任何事情，或者它打開一個頁面，上面寫著“找不到檔案”。很奇怪。
方法三：允許用戶長按圖片自行保存
On Google Images, any mobile user can long-tap an image to save it to their gallery. I tried to recreate this on my webpage by just putting a simple img element on the page. I tried setting the style attribute to -webkit-user-select: none to prevent the long-tap from just highlighting elements on the page. I even tried removing all other elements from the webpage, using document.open(), to see if that would help:
document.open();
document.write("<html><body></body></html>")
myCanvas.setAttribute('style', "-webkit-user-select: none;")
document.body.appendChild(myCanvas);
When I try this, long-tapping the image doesn't seem to do anything on iPhone or Android. This method seems the most promising but I don't know how to make my webpage behave like Google Images.
uj5u.com熱心網友回復：
事實證明我對方法 3 的看法是錯誤的。長按 html img 元素按預期作業。問題是我不小心使用了畫布元素而不是影像元素。這就是我將畫布元素轉換為影像元素的方式：
var canvas_data = canvas.toDataURL();
var img_element = document.createElement("img")
img_element.src = canvas_data;
document.body.appendChild(img_element);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452211.html