Question

我正在尝试将工作设为一个按钮，打开一个新窗口，其中包含我的画布内容（画布的渲染图像）。

这是我的JS代码：

var canvas  = document.getElementById("thecanvas");
var dataUrl = canvas.toDataURL();
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
function clickme() {
window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}

HTML code：

<input type="button" onclick="clickme()" value="OPEN"/>

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black">

但是当我点击“打开”按钮时，没有任何反应......但我真的不明白为什么。我已经看了很多网站的教程。我甚至复制并粘贴了一些代码，但仍然没有任何反应。难道我做错了什么？谢谢！

Answer 1

首先，执行语句的顺序很重要。绘制到画布后需要调用toDataURL，或者生成的dataURL不包含该内容。

我不确定你的脚本标签是什么样的，但是这里有一个工作示例，它以更加简单的方式完成事件：http://jsfiddle.net/b7G6J/

HTML：

<input id="thebutton" type="button" value="OPEN"/>

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black">

JS：

var canvas  = document.getElementById("thecanvas");
var context = canvas.getContext("2d");

// First drawing commands
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
// Then toDataURL
var dataUrl = canvas.toDataURL();

var button = document.getElementById("thebutton");
button.onclick =function() {
  window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}

使用Canvas dataURL的问题

1 个答案: