如何保存画布作为一个图像与画布.toDataURL () ？

我目前正在构建一个 HTML5网络应用程序/Phonegap 本地应用程序，我似乎不知道如何保存我的画布作为一个图像与 canvas.toDataURL()。有人能帮帮我吗？

这是密码，有什么问题吗？

我的画布被命名为“画布签名”

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">
<button onclick="putImage()">Save as Image</button>
</div>
476231 次浏览
小开

你应该使用 window.location = myImage;而不是 imageElement.src = myImage;

甚至在那之后，浏览器还会显示图像本身。你可以右击并使用「储存连结」下载图像。

有关更多信息，请查看 这个链接。

小开

您可以使用 画布2图像提示下载。

我也遇到了同样的问题，下面是一个简单的例子，它将图片添加到页面并强制浏览器下载它:

<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><button onclick="to_image()">Draw to Image</button></div>
<image id="theimage"></image>
</body>
</html>
小开

@ Wardenclyffe 和@Colvin 你们都试图用画布来保存图像，而不是用画布的上下文。两者都应该尝试 ctx.toDataURL () ; 试试这个:

var canvas1 = document.getElementById("yourCanvasId");  <br>
var ctx = canvas1.getContext("2d");<br>
var img = new Image();<br>
img.src = ctx.toDataURL('image/png');<br>
ctx.drawImage(img,200,150);<br>

你亦可参考以下连结:

Http://tutorials.jenkov.com/html5-canvas/todataurl.html

Http://www.w3.org/tr/2012/wd-html5-author-20120329/the-canvas-element.html#the-canvas-element

小开

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

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
小开

我创建了一个小型库来实现这一点(以及其他一些方便的转换)。它叫做 Reimg，使用起来非常简单。

ReImg.fromCanvas(yourCanvasElement).toPng()

小开

这个工作为我: (只有谷歌铬)

<html>
<head>
<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 downloadImage()
{
var canvas = document.getElementById("thecanvas");
var image = canvas.toDataURL();


var aLink = document.createElement('a');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click");
aLink.download = 'image.png';
aLink.href = image;
aLink.dispatchEvent(evt);
}
</script>
</head>
<body onload="draw()">
<canvas width=200 height=200 id="thecanvas"></canvas>
<div><button onclick="downloadImage()">Download</button></div>
<image id="theimage"></image>
</body>
</html>
小开

类似于 1000Bugy 的回答，但是更简单，因为您不必动态制作一个锚并手动分派一个单击事件(加上 IE 修复)。

如果您将下载按钮设置为一个锚点，那么您可以在运行默认锚点功能之前将其劫持。 因此，onAnchorClick可以将锚 href 设置为画布 base64映像，将锚下载属性设置为您想要命名的映像。

这在(当前) IE 中不起作用，因为它没有实现 download 属性并阻止下载数据 uris。但是这可以通过使用 window.navigator.msSaveBlob来修复。

因此，您的锚点击事件处理程序将如下所示(其中 anchor、 canvas和 fileName是范围查找) :

function onClickAnchor(e) {
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
e.preventDefault();
} else {
anchor.setAttribute('download', fileName);
anchor.setAttribute('href', canvas.toDataURL());
}
}

这是 小提琴

小开

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

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();
小开

您可以尝试这样做; 创建一个虚拟的 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();
}
小开

在 Cordova 中运行时，不能使用前面提到的方法下载映像。 您将需要使用 Cordova 文件插件。这将允许您选择在哪里保存它，并利用不同的持久性设置。详情请点击这里: < a href = “ https://cordova.apache.org/docs/en/update/reference/cordova-plugin-file/”rel = “ nofollow norefrer”> https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

或者，您可以将图像转换为 base64，然后将字符串存储在 本地存储中，但是如果您有许多图像或高分辨率，这将非常快速地填满您的配额。

小开

我为此创建了一个简单的类型脚本函数，只是删除了与 javascript 一起使用的类型。

 //ImagePath == canvas.toDataUrl()
private saveImage(imagePath: string, imageName: string ){
const link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link)
link.setAttribute('download', imageName + '.png');
link.setAttribute('href', imagePath.replace("image/png", "image/octet-stream"));
link.click();
}


//function call
saveImage(canvas.toDataURL(), "myName")
小开

还可以对下载的图像使用元素引用:

HTML:

<a download style="display:none" ref="imageDownloadRef"></a>

JAVASCRIPT:

  this.$refs['imageDownloadRef'].href = this.canvas.toDataURL({
format: 'jpeg',
quality: 1.0,
})
const imageDownloadLink = this.$refs.imageDownloadRef as HTMLElement
imageDownloadLink.click()
小开

您需要创建一个 Image 对象来存储画布的基础64图像。这样，您的图像 imageElement就可以获取它的 src属性值。

function putImage(){
var canvas1 = document.getElementById("canvasSignature");
   

var imageObject = new Image();
imageObject.src = canvas1.toDataURL("image/png");


var imageElement = document.getElementById("MyPix");
imageElement.src = imageObject.src;
}

自动保存图像

您可以通过创建一个链接并将 src值作为链接的 href来自动保存图像。然后使用 JavaScript 中的 click()方法模拟单击。

function putImage(){
var canvas1 = document.getElementById("canvasSignature");
       

var imageObject = new Image();
imageObject.src = canvas1.toDataURL("image/png");


var imageElement = document.getElementById("MyPix");
imageElement.src = imageObject.src;
       



// Saving it locally automatically
let link = document.createElement("a");
link.setAttribute('download', "download")
link.href= imageElement.src
link.click()
}
小开

试试 ctx 后面的行

var img = new Image();
img.crossOrigin = 'anonymous';

我可以给你们举个小例子

你可以创建两个函数

  1. 从 url (可以是本地/远程)在画布上绘制图像。

         function loadCanvas(){
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.crossOrigin = 'anonymous';
img.addEventListener("load",()=>{
ctx.drawImage(img, 0, 0, 300, 450);
});
//i have chosen a random image from the internet to display
img.src = 'https://images.squarespace-cdn.com/content/v1/592df00e3a0411d38a6c0e88/1508276785945-S2PHOFE36SU6NN6K8F3Y/70db5-sunsetideahousesunsetideahouse.jpg';


}

  2. 保存/发布该图像或在 img 标记中显示

        function copyimage(){
var c = document.getElementById("mycanvas");
var datanew = c.toDataURL("image/jpeg");
$(".imagecopy").html('<img src="'+datanew+'" width="300px" height="450px" />');
}

单击此处 查看完整代码


提交答案