将画布图像保存在Ipad上

Save Canvas image on Ipad

本文关键字：保存 存在 Ipad 图像 布图像      更新时间：2023-09-26

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

我有一张id为"canvas1div"的画布。我希望能够通过电子邮件或直接将此画布作为图像接收到照片库中。

通过照片库关于照片库，我发现了这个问题将画布图像保存在IOS/Android 的本地移动存储上

这是我想调用的保存图像的功能

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

我不知道如何手动将插件添加到javascript中，所以这里的任何建议都将不胜感激。

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

感谢您的帮助

不知道这是否对你有帮助，但在这里你可以找到下载，但无法通过电子邮件从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>
相关文章：