[英]How To Save Canvas As An Image With canvas.toDataURL()?
我目前正在构建一个 HTML5 web 应用程序/Phonegap 本机应用程序，我似乎无法弄清楚如何使用canvas.toDataURL()将我的 canvas 保存为图像。 有人可以帮帮我吗？
这是代码，它有什么问题？
//我的canvas被命名为“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">
<button onclick="putImage()">Save as Image</button>
</div>
这是一些代码。 没有任何错误。
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
此解决方案允许您更改下载文件的名称：
HTML：
<a id="link"></a>
爪哇脚本：
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();
您可以使用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><button onclick="to_image()">Draw to Image</button></div>
<image id="theimage"></image>
</body>
</html>
你可以试试这个； 创建一个虚拟的 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();
}
我创建了一个小型库来执行此操作（以及其他一些方便的转换）。 它叫做reimg ，使用起来非常简单。
ReImg.fromCanvas(yourCanvasElement).toPng()
类似于1000Bugy 的答案，但更简单，因为您不必即时制作锚点并手动调度点击事件（加上 IE 修复）。
如果您将下载按钮设置为锚点，则可以在运行默认锚点功能之前对其进行劫持。 所以onAnchorClick您可以将锚点 href 设置为画布 base64 图像，并将锚点下载属性设置为您想要为图像命名的任何内容。
这在（当前）IE 中不起作用，因为它没有实现下载属性并阻止下载数据 uri。 但这可以通过使用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>
<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>
而不是imageElement.src = myImage; 你应该使用window.location = myImage;
即使在那之后，浏览器也会显示图像本身。 您可以右键单击并使用“保存链接”来下载图像。
查看此链接以获取更多信息。
在 Cordova 中运行时，您不能使用前面提到的方法下载图像。 您将需要使用Cordova 文件插件。 这将允许您选择保存它的位置并利用不同的持久性设置。 详情请见： https : //cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/
或者，您可以将图像转换为 base64，然后将字符串存储在localStorage 中，但是如果您有许多图像或高分辨率，这将很快填满您的配额。
我为此创建了简单的打字稿函数，只需删除与 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()
您需要创建一个映像 object 来存储 canvas 的 base 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';
我可以给你看一个小例子
您可以创建 2 个函数
从 url（可以是本地/远程）在 canvas 上绘制图像。
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 inte.net to display img.src = 'https://images.squarespace-cdn.com/content/v1/592df00e3a0411d38a6c0e88/1508276785945-S2PHOFE36SU6NN6K8F3Y/70db5-sunsetideahousesunsetideahouse.jpg'; }保存/发布该图像或在 img 标签中显示
function copyimage(){ var c = document.getElementById("mycanvas"); var datanew = c.toDataURL("image/jpeg"); $(".imagecopy").html('<img src="'+datanew+'" width="300px" height="450px" />'); }点此查看完整代码
@Wardenclyffe 和@SColvin，你们都在尝试使用画布保存图像，而不是使用画布的上下文。 你应该尝试 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
如何在HTML5 canvas，canvas.toDataURL（）中保存大小为a * a的图像，并稍后以不同的大小a * a / 2a * 2a绘制它？
[英]How to save an image of size a*a in HTML5 canvas, canvas.toDataURL() and later draw it in different sizes, a*a / 2a*2a?
canvas.toDataURL（“ image / png”）-如何工作以及如何对其进行优化
[英]canvas.toDataURL(“image/png”) - how does it work and how to optimize it
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.