How to download p5 canvas as image on iOS

joneik

I want the user to be able to download the canvas as an image.

I have found several ways to make this work for desktop browsers, but none of them work on iOS (Safari and Chrome). The techniques I've tried: the P5 save() function, the .toDataURL() method, and the P5 saveFrames() function.

The result on iOS is a long string in the URL field and an "Unknown" or "Download error" message in the viewport.

The code:

function saveImage() {
    var fullfilename = filename + ".jpeg";
    if (savemethod === 1) {
        // Attempt 1
        save(fullfilename);
    } else if (savemethod === 2) {
        // Attempt 2
        var image = defaultCanvas0.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        var anchor = document.createElement('a');
        anchor.setAttribute('href', image);
        anchor.setAttribute('download', fullfilename);
        anchor.click();
    } else if (savemethod === 3) {
        // Attempt 3
        saveFrames(filename, "jpg", 1, 1);
    }
}

clankill3r

Maybe this: https://github.com/devgeeks/Canvas2ImagePlugin