强制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())..."块中带有新代码.该代码将我带到带有域名/iString" URL的新页面并生成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.
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屋！
