如何使用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>

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

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

相关推荐

  • canvas 滚动条:如何使用Canvas滚动条创建有趣的用户界面

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

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

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

    2023-04-23 04:22:57
    0 16 49
  • 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 31 40
  • canvas 旋转图片Canvas 图片技术的奇妙之处

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

    2023-06-12 06:34:14
    0 81 50
  • canvas图片动画:Unlock the Power of Canvas Animation!

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

    2023-06-17 09:05:36
    0 34 97
  • canvas 滚动:Unlock the Power of Canvas Scrolling to Transform Your

    Canvas滚动是指在Canvas画布上实现滚动效果的一种技术。它可以通过改变画布的位置来实现滚动,也可以通过改变画布的大小来实现滚动。…

    2023-01-03 01:47:42
    0 80 40
  • canvas 官网Bring Your Ideas to Life with Creative Artwork

    Canvas 官网是一个用于创建图形的 HTML5 API,它可以在浏览器中使用 JavaScript 来绘制 2D 图形。它提供了一个可以在网页上绘制图形的强大工具,可以用来创建动画、游戏、数据可视化等。…

    2023-02-17 12:20:24
    0 14 82
  • canvas 使用 Create Amazing Visuals!

    示例示例Canvas 是 HTML5 中的一个新元素,可以用来绘制图形,游戏等。使用 canvas 首先需要在 HTML 中创建一个 canvas 元素:…

    2023-01-13 00:33:19
    0 45 18

发表评论

登录 后才能评论

评论列表(62条)