如何使用canvas.toDataURL()将画布保存为图像

我目前正在构建一个 HTML5 Web 应用程序 / Phonegap 本地应用程序,我似乎无法弄清楚如何将我的画布保存为canvas.toDataURL()的图像。

我目前正在构建一个 HTML5 Web 应用程序 / Phonegap 本地应用程序,我似乎无法弄清楚如何将我的画布保存为canvas.toDataURL()的图像。

这是代码,有什么问题吗?

/ / 我的画布被命名为“canvasSignature”

JavaScript:

function putImage()
{
  var canvas1 = document.getElementById("canvasSignature");        
  if (canvas1.getContext) {
     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      
  }
  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage;                           
}  

HTML5:

<div id="createPNGButton">
    <on onclick="putImage()">Save as Image</on>        
</div>
176

这是一些代码。没有任何错误。

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.
window.location.href=image; // it will save locally
75

此解决方案允许您更改下载文件的名称:

HTML格式:

<a id="link"></a>

JavaScript:

  var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.png');
  link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  link.click();
34

你可以试试这个;创建一个虚拟的 HTML 锚,并从那里下载图像...

// Convert canvas to image
document.getElementById('btn-download').addEventListener("click", function(e) {
    var canvas = document.querySelector('#my-canvas');
    var dataURL = canvas.toDataURL("image/jpeg", 1.0);
    downloadImage(dataURL, 'my-canvas.jpeg');
});
// Save | Download image
function downloadImage(data, filename = 'untitled.jpeg') {
    var a = document.createElement('a');
    a.href = data;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
}
25

您可以使用canvas2image提示下载。

我有同样的问题,这里有一个简单的例子,都将图像添加到页面,并强制浏览器下载它:

<html>
    <head>
        <script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
        <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100); 
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }
            function to_image(){
                var canvas = document.getElementById("thecanvas");
                document.getElementById("theimage").src = canvas.toDataURL();
                Canvas2Image.saveAsPNG(canvas);
            }
        </script>
    </head>
    <body onload="draw()">
        <canvas width=200 height=200 id="thecanvas"></canvas>
        <div><on onclick="to_image()">Draw to Image</on></div>
        <image id="theimage"></image>
    </body>
</html>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(370)
Dockerfile中的 VOLUME的目的是什么
上一篇
nim中“魔法”pragma的含义是什么
下一篇

相关推荐

  • canvas下载安装:Unleash the Power of Canvas to Create Amazing Visuals

    Canvas是一种HTML5技术,可以在网页上创建和绘制2D图形。它是一个JavaScript API,可以使用JavaScript代码来绘制图形,并且可以添加各种效果,如阴影,渐变,动画等。…

    2024-02-08 00:23:09
    0 27 66
  • canvas 滚动条:如何使用Canvas滚动条创建有趣的用户界面

    示例示例Canvas滚动条是一种在画布上实现滚动效果的技术。它可以让用户在画布上滚动,以浏览更多的内容。Canvas滚动条通常由两个部分组成:滚动条和滚动区域。滚动条是一个滑块,用户可以拖动它来滚动画布。滚动区域是滚动条所在的区域,用户可以拖动滚动条来滚动画布。…

    2023-04-27 08:21:47
    0 16 26
  • canvas 裁剪:Unlock Your Creativity with Canvas!

    Canvas裁剪是指使用Canvas API对图像进行裁剪。Canvas API提供了一系列的函数,可以让开发者在Canvas上绘制几何图形,包括矩形、圆形、椭圆、多边形等。…

    2023-04-23 04:22:57
    0 29 16
  • canvas英文:Unlock the Power of Canvas to Create Amazing Artworks

    Canvas is an HTML element which can be used to draw graphics using scriptingusually JavaScript). It can be used to draw graphs, make photo compositions or even perform animations.…

    2023-05-14 11:09:46
    0 20 98
  • canvas 旋转图片Canvas 图片技术的奇妙之处

    示例示例使用 canvas 旋转图片的步骤如下:使用 `Image()` 构造函数创建一个新的图像对象,并将其赋值给一个变量;…

    2023-06-12 06:34:14
    0 93 78
  • python的canvas用Python Canvas来创造美丽的图案

    Python Canvas是一种用于绘制图形的库,它可以在Python中创建和操作图形对象,如矩形、椭圆、多边形、文本等。它可以用来创建GUI应用程序,也可以用来创建图像处理应用程序。…

    2024-03-08 12:19:05
    0 65 41
  • canvas图片动画:Unlock the Power of Canvas Animation!

    示例示例Canvas图片动画是指使用Canvas API将图片进行动画处理,从而实现动态效果的一种技术。下面是一个简单的Canvas图片动画的实现代码示例:…

    2023-06-17 09:05:36
    0 35 72
  • canvas 阴影 Unleash Your Creative Potential

    示例示例Canvas 阴影是指在 canvas 上绘制图形或文本时,可以为其添加阴影的功能。使用 canvas 的阴影,可以使绘制的图形或文本显得更加立体、更有层次感。…

    2023-12-28 04:55:01
    0 89 65

发表评论

登录 后才能评论

评论列表(12条)