强制 iOS 从 HTML5 Canvas 下载图像(使用纯 javascript) [英] Force iOS to download image from HTML5 Canvas (using pure javascript)

问题描述

之前有人问过这个问题，一般的回答是在 iOS 上无法完成.但是这些问题已经存在好几年了，有可能已经开发了一种解决方法，或者现在有一种方法可以做到这一点.

This question has been asked before and the general response is that it can't be done on iOS. However those questions are several years old, and it is possible that a workaround has been developed, or that there is now a way to do this.

我有一个可以工作的纯 JavaScript 图像编辑器，它不会让最后的编辑步骤(保存编辑的图像)发生在 iOS 中.很难相信这是不可能.所以，一个简单的问题:有没有办法将画布图像下载到 iOS 用户的移动设备?

I have a working pure JavaScript image editor that will not let the final editing step, saving the edited image, happen in iOS. It's hard to believe that this is impossible. So, a simple question: is there a way to download the canvas image to an iOS user's mobile device?

我尝试将下面的第一个答案集成到我的代码中，但我显然有语法错误.这是if(isIOS())..."块中带有新代码的预先存在的代码.该代码将我带到一个带有 url域名/iString"的新页面并生成 404，因为 iString 显然不作为文档存在.

I have tried integrating the first answer below into my code, but I obviously have the syntax wrong. Here is the pre-existing code with the new code in "if(isIOS())..." block. The code is taking me to a new page with the url "domain name/iString" and generating a 404 since iString obviously does not exist as a document.

// Save a JPG (with quality setting) or full quality PNG to user's drive. 

function fileSave()
{

  var canvas = document.getElementById('cSave');

  if (document.getElementById("png").checked == true)
  {
    var quality = null;     
    var format = "image/png"; 
    var name = "new_image.png"; 
  }

  if (document.getElementById("jpg").checked == true)
  {
    var format = "image/jpeg";  
    var quality = Number(document.getElementById("quality").value) / 100; 
    var name = "new_image.jpg"
  }

  canvas.toBlob(function(blob) // Send canvas to blob and download blob 
  {
    const anchor = document.createElement('a')
    const url = URL.createObjectURL(blob)
    anchor.href = url
    anchor.download = name, 
    document.body.appendChild(anchor)

    // begin new code block 
    if (isIOS()) 
    {
    var iString = btoa(blob); 
    // data:[<mediatype>][;base64],<data>
    iString = "data: " + format + ";base64," + iString; 
    document.getElementById("iOS").innerHTML = '<a href="iString">click me</a>';   
    }
    // end new code block 

    anchor.click()
    document.body.removeChild(anchor)
    URL.revokeObjectURL(url);   
    }, format, quality)
}

我让它在 Firefox (Windows 7) 中工作.正如所料，它在 Chrome 中不起作用(不允许将顶部框架导航到数据 URL")错误.

I got it to work in Firefox (Windows 7). As somewhat expected, it does not work in Chrome ("Not allowed to navigate top frame to data URL") error.

if (!isIOS()) // note the ! for desktop testing 
{
var iString = canvas.toDataURL(); 
document.getElementById("iOS").innerHTML = '<a href="' + iString + '">click me</a>';   
}

但是，当我删除！"时，希望它可以在 iOS 中运行，但它不适用于任何浏览器(包括 Firefox).iPhone 应用程序Inspect"返回canvas.toBlob() 不是函数"错误，这在 Safari 中可能是预期的(Inspect"可能正在使用 Safari)，但我显然仍然没有其他浏览器的语法在 iOS 中.

But, when I remove the "!", expecting it to work in iOS, it does not work on any browser (including Firefox). The iPhone app "Inspect" returns a "canvas.toBlob() is not a function" error, which might be expected in Safari ("Inspect" may be using Safari), but I apparently still do not have the syntax right for other browsers in iOS.

今晚的最后一次

这会在 iOS Firefox 中打开一个新窗口，但没有图像，只有一个小(可能是 6 像素 x 6 像素)空框.

This opens a new window in iOS Firefox, but there's no image, just a small (maybe 6 pixel x 6 pixel) empty box.

var canvas = document.getElementById('cSave');
var convert = btoa(canvas); 
convert = 'data:image/jpeg;base64,' + convert;   
document.getElementById("iOS").innerHTML = '<a href="' + convert + '" target="_blank">click me</a>';   

另外，base64 字符串看起来不够长.

Also, the base64 string does not appear long enough.

data:image/jpeg%3Bbase64,W29iamVjdCBIVE1MQ2FudmFzRWxlbWVudF0=

在 https://codebeautify.org/base64-to-image-converter 这显示为一个带有小损坏图像图标的框.

On https://codebeautify.org/base64-to-image-converter this appears as a box with a small broken image icon.

谢谢

PS:仍然有问题，但 他们可以从那里使用两个系统对话框之一来保存图像."我在使用 iOS 10.2 的 iPhone 上看不到任何可用的系统对话框.1.

PS: Still having issues but "From there they could use one of the two system dialogs to save the image." I don't see any available system dialogs on my iPhone using iOS 10.2.1.

推荐答案

虽然无法从 Web 应用程序将图像直接保存到相机胶卷，但大多数用户都熟悉自己保存图像.

While it is impossible to save am image directly to the camera roll from a web app, most users are familiar with saving images on their own.

当用户希望保存他们的图像时，您可以创建一个 data uri 并让他们在新选项卡中打开它.从那里他们可以使用两个系统对话框之一来保存图像.

When the user wishes to save their image, you could create a data uri and have them open it in a new tab. From there they could use one of the two system dialogs to save the image.

这篇关于强制 iOS 从 HTML5 Canvas 下载图像(使用纯 javascript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！