War*_*ffe 125 javascript html5 canvas save cordova
我目前正在构建一个HTML5网络应用程序/ 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">
<button onclick="putImage()">Save as Image</button>
</div>
use*_*941 108
这是一些代码.没有任何错误.
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
Tho*_*s W 27
此解决方案允许您更改下载文件的名称:
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();
SCo*_*vin 22
您可以使用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>
<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的答案，但更简单，因为您不必动态定位并手动分配click事件（外加IE修复程序）。
如果将下载按钮设为锚，则可以在运行默认锚功能之前立即劫持它。因此，onAnchorClick您可以将anchor href设置为canvas base64图像，并将anchal download属性设置为您要命名图像的名称。
这在（当前）IE中不起作用，因为它没有实现download属性，并阻止了数据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锚，然后从那里下载图片，例如...
// 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();
}
这是小提琴
| 归档时间： |
|
| 查看次数： |
286192 次 |
| 最近记录： |