使用图像创建 Canvas 元素并附加到父元素答案

【问题标题】：Create Canvas element with image and append to parent使用图像创建 Canvas 元素并附加到父元素
【发布时间】：2015-05-26 18:46:22
【问题描述】：

我需要用图像创建 Canvas 元素，并且需要附加到父级，我已经这样做了

<html>
<head>
    <script>
        window.onload = function() {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext("2d");
        canvas.id = "canvas_id";
        canvas.setAttribute("class" ,"canvas");
        canvas.height =  "400";
        canvas.width =  "800";
        var image = new Image();
        image.src = "http://localhost/tile.png";
        image.onload = function(){
           context.drawImage(image, canvas.width, canvas.height);
        }
        document.body.appendChild(canvas);
    }
</script>
</head>
<body>
</body>
</html>

它给了空白画布

有人可以指导我吗？

【问题讨论】：

那么获取Base64数据的函数在哪里？
您是否使用canvas.toDataURL('image/jpeg'); 来获取您的画布/图像的数据？
不使用'image/png'
和 tile.png 是在根级别？即，如果您将图像 URL 复制粘贴到浏览器，您可以看到它吗？（对不起，愚蠢的问题，但首先排除基础知识）
是的，我可以看到 URL 的图像

标签： javascript jquery canvas

【解决方案1】：

您以错误的方式使用drawImage()。而不是在 (0,0) 处绘制图像，而是将其绘制在画布区域之外，因为宽度和高度是通常的位置。

有效的签名是：

context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

其中dx 和dy 是增量位置（相对于原点，通常为 (0,0) 未翻译时）。如果没有指定宽度和高度，drawImage() 将默认使用图像的自然宽度和高度。

第二个版本允许覆盖默认大小，第三个版本允许您从一个区域绘制到另一个区域。

Source

更正的例子：

window.onload = function() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext("2d");
  canvas.id = "canvas_id";
  canvas.className = "canvas";                  // should be className
  canvas.height = 400;                          // should be numbers
  canvas.width = 800;
  var image = new Image();
  image.onload = function() {
    // or set canvas size = image, here: (this = currently loaded image)
    // canvas.width = this.width;
    // canvas.height = this.height;
    context.drawImage(this, 0, 0);              // draw at (0,0), size = image size

    // or, if you want to fill the canvas independent on image size:
    // context.drawImage(this, 0, 0, canvas.width, canvas.height);
  }
  // set src last (recommend to use relative paths where possible)
  image.src = "http://lorempixel.com/output/fashion-q-c-800-400-7.jpg";
  document.body.appendChild(canvas);
}

话虽如此，如果您只需要附加图像，则无需通过画布。只需直接将图像添加到 DOM（我认为这不是您想要的，但以防万一..）：

var image = new Image();
image.src = "tile.png";
document.body.appendChild(image);

【讨论】：

【解决方案2】：

这是我的看法...您需要指出要开始绘制的坐标（即 0、0），并且 - 可选地 - 您可以指定画布的大小（宽、高）。

就我而言，我将画布设置为与图像一样大（而不是任意的 400x800），您可能需要根据自己的要求进行更新。

我添加了一些 CSS 来显示画布相对于图像的大小。您也可以根据需要更新/删除它。

更新

~~它使用隐藏的图像作为来源。~~

我希望这对你有用。

window.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");
  canvas.id = 'canvas_id';
  canvas.setAttribute("class", "canvas");

  var image = new Image();
  image.src = 'http://placekitten.com/g/200/300';

  canvas.width = image.width;
  canvas.height = image.height;

  ctx.drawImage(image, 0, 0, image.width, image.height);
  document.body.appendChild(canvas);
}

.canvas {
  border: solid red 1px;
}

<html>

<body>

</body>

</html>

【讨论】：