Question

该网页正在iPad上的Safari上运行。

我有一个带有id＆＃34; canvas1div＆＃34;的画布。我希望能够通过电子邮件或直接将这个画布作为图像接收到照片库中。

通过图片库 关于照片库，我发现了这个问题 Save canvas image on local mobile storage for IOS/Android

这是我想要保存图像的功能

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

我不知道如何手动将插件添加到javascript中，因此任何建议都将非常感谢。

电子邮件 我再也不知道如何将画布转换为图像并通过电子邮件发送。

感谢您的帮助

Answer 1

不知道这是否对您有所帮助，但在这里您可以找到下载，但是无法通过电子邮件从JavaScript发送电子邮件：

下面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:test@example.com?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>

在Ipad上保存画布图像

1 个答案: