javascript - 强制 iOS 从 HTML5 Canvas 下载图像(使用纯 javascript)

Question

这个问题之前有人问过，一般的回答是在 iOS 上做不到。 但是这些问题已经有好几年了，可能已经开发出解决方法，或者现在有办法做到这一点。

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

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

// 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”)错误。

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

但是，当我删除“!”时，期望它在 iOS 中工作，但它在任何浏览器(包括 Firefox)上都不起作用。 iPhone 应用程序“检查”返回“canvas.toBlob() 不是函数”错误，这在 Safari 中可能是预期的(“检查”可能正在使用 Safari)，但我显然仍然没有适合其他浏览器的语法在 iOS 中。

今晚的最后编辑:

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

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字符串显得不够长。

data:image/jpeg%3Bbase64,W29iamVjdCBIVE1MQ2FudmFzRWxlbWVudF0=

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

谢谢

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

Answer 1

虽然无法通过网络应用将图像直接保存到相机胶卷，但大多数用户都熟悉自己保存图像。

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