Question

之前已经问过这个问题，一般的回答是它无法在iOS上完成。然而这些问题已有几年的历史了，可能已经开发了一种解决方法，或者现在有办法解决这个问题。

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

编辑：我已经尝试将下面的第一个答案集成到我的代码中，但我显然有错误的语法。这是在“if（isIOS（））...”块中使用新代码的预先存在的代码。代码将我带到一个新页面，其中包含url“domain name / 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应用程序“Inspect”返回“canvas.toBlob（）不是函数”错误，这可能是Safari中预期的（“Inspect”可能正在使用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并让它们在新标签中打开。从那里，他们可以使用两个系统对话框之一来保存图像。

强制iOS从HTML5 Canvas下载图像（使用纯JavaScript）

1 个答案: