Force iOS to download image from HTML5 Canvas (using pure javascript) - Stack Overflow

admin管理员组

文章数量:1416316

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.

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?

EDIT: 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)
}

EDIT: 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>';   
}

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.

LAST EDIT FOR TONIGHT:

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>';   

Also, the base64 string does not appear long enough.

data:image/jpeg%3Bbase64,W29iamVjdCBIVE1MQ2FudmFzRWxlbWVudF0=

On this appears as a box with a small broken image icon.

Thank you

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.

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.

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?

EDIT: 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)
}

EDIT: 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>';   
}

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.

LAST EDIT FOR TONIGHT:

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>';   

Also, the base64 string does not appear long enough.

data:image/jpeg%3Bbase64,W29iamVjdCBIVE1MQ2FudmFzRWxlbWVudF0=

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

Thank you

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.

• javascript
• ios
• html
• html5-canvas
• base64

Share Improve this question Follow edited May 10, 2018 at 8:26 AARRGGHHH asked May 9, 2018 at 22:33 AARRGGHHHAARRGGHHH 6711 gold badge11 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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.

本文标签： Force iOS to download image from HTML5 Canvas (using pure javascript)Stack Overflow