1

我正在使用以下代码

画布和图像的HTML代码

<canvas id="myCanvas" style="display:none" width="400" height="400"></canvas>
<img id="canvasImg" />

用于从服务器获取图像并显示在画布上然后显示图像的JavaScript代码

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

baseimage        = new Image();
baseimage.src    = 'what.jpg';
baseimage.onload = function() {
    ctx.drawImage(baseimage,1,1);
}

var dataURL = canvas.toDataURL("image/png");
document.getElementById('canvasImg').src = dataURL;
$("#myCanvas").show();

图像正在显示，但没有“what.jpg”文件。在画布上文件是可见的，但在 IMG 标签中什么都看不到。我在最新版本的 Chrome 上运行它。

4

2 回答 2

8

您的代码有几个问题。

  1. 您在加载和绘制 jpeg 图像之前调用 toDataUrl，因此您获得了空画布的数据 URL。将示例的最后三行移动到 image.onload 的处理函数中，它应该可以工作。

  2. 您在 canvas 元素上调用 .show() ，而不是您将 dataUrl 分配给的 img 元素。但是我想知道您为什么要这样做，因为您的意图似乎是使用 invisible<canvas>来为 visible 生成内容<img>，这就是 CSS 样式所说的。

  3. 应该在设置 src 之前定义 onload 处理程序，因为当图像在浏览器缓存中时，可以在设置 src 属性的那一刻调用 onload 函数，这是在您定义自己的加载处理程序之前。

这是固定代码（未经测试）：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

baseimage        = new Image();
baseimage.onload = function() {
    ctx.drawImage(baseimage,1,1);    
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById('canvasImg').src = dataURL;
}
baseimage.src    = 'what.jpg';
于 2013-04-04T15:48:13.477 回答
0

我认为 onload 调用应该在 src 之前。

像这样：

baseimage = new Image();
baseimage.onload = function() {
ctx.drawImage(baseimage,1,1);
}
baseimage.src = 'what.jpg';
于 2013-04-04T13:04:07.730 回答