CODEWITHSUNDEEP
javascriptiosimagecanvassave
Eric Martin
Eric Martin

Reputation: 1

Save Canvas image on Ipad

The webpage is being run on Safari on an iPad.

I have a canvas with the id "canvas1div". I would like to be able to receive this canvas as an image either by email or directly into the photo library.

Via Photo Library With regards to the photo library, I found this question Save canvas image on local mobile storage for IOS/Android

This is the function that I would like to call to save the image 

function saveimage() {
    window.canvas2ImagePlugin.saveImageDataToLibrary(
     document.getElementById('canvas1div')
     );
}

I don't know how to manually add the plug in to javascript so any advice here would be greatly appreciated.

Email Again I don't know how to convert the canvas to an image and email it.

Thank you for your help

Upvotes: 0

Views: 5386

Answers (1)

SilentTremor
SilentTremor

Reputation: 4902

Don't know if this helps you but here you can find download but email send from JavaScript with email cannot be done:

Example with download file below http://jsfiddle.net/oa2s5eu7/1/

Javscript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

// Converts image to canvas; returns new canvas element
    function convertImageToCanvas(image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext("2d").drawImage(image, 0, 0);

        return canvas;
    }


    // Converts canvas to an image
    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    }

document.getElementById('mydownload').onclick= function(){

    var image = convertCanvasToImage(document.getElementById("myCanvas"));
    var anchor = document.createElement('a');

    console.log(anchor);
    anchor.setAttribute('href', image.src);
    anchor.setAttribute('download', 'image.png');
    anchor.click();
}

document.getElementById('sendEmail').onclick= function(){

    var image = convertCanvasToImage(document.getElementById("myCanvas"));

    window.open('mailto:[email protected]?subject=subject&body=you cann send only txt from javscript in email ', '_blank');
}

Html:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>


<button id='mydownload'>Download Image</button>
<button id='sendEmail'>Send Email</button>

Upvotes: 1

Related Questions