0
在我的应用程序中,我将两张图像合并为html.now中的单个图像,并将该图像保存到我的磁盘中。但代码工作正常,只有2次,之后,它没有保存image.i试图找到错误,但没有得到任何东西。请帮我把它整理出来。如何将画布图像保存在磁盘中?
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream"
width="220" height="277">
<img id="scream2" src="img_the_scream.jpg" alt="The Scream"
width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="canvas" width="800" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
var img = document.getElementById("scream2");
ctx.drawImage(img,210,10);
}
</script>
<h1>Save Image</h1>
<button type="button" onclick="saveImage()">save image</button>
<script type="text/javascript">
function saveImage() {
var ua = window.navigator.userAgent;
if (ua.indexOf("Chrome") > 0) {
// save image without file type
var canvas = document.getElementById("canvas");
document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
// save image as png
var link = document.createElement('a');
link.download = "test1.png";
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");;
link.click();
}
else {
alert("Please use Chrome");
}
}
</script>
[使用HTML5/Javascript生成并保存文件]的可能重复(http://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file) – Pinal
@ Pinal,工作正常,如果我downaload正常图像..但如果我这样做后结合它不适合我 –