在将 canvas 高度和宽度设置为 img.offsetHeight 和 img.offsetWidth 时显示一个黑色小方块

Question

我正在尝试显示其中绘制有图像的 canvas（特别是为了防止 chrome 移动用户下载图像）。当我将 canvas.style.height 设置为 img.offsetHeight 并将 canvas.style.width 设置为 img.offsetwidth（此处为 img=document.getElementById("img-element")）时，它只显示一个黑色的小方块，就好像它的高度和宽度一样是 0.

代码如下：

window.onload=function(){  
  var c = document.getElementById("c");
  var ctx = c.getContext("2d");
  var img=document.getElementById("img");
  ctx.drawImage(img, 1, 1);
  c.style.height=(img.offsetHeight);
  c.style.width=(img.offsetWidth);
}

<img src="Icon.png" id="img" style="display:none">
<canvas id="c" style="border:2px solid #001100" oncontextmenu="return false;">
  lol ur potato pc doesn't support canvas!!!
</canvas>
<script src="script.js"></script>

输出：

Answer 1

我会这样写。首先不要在 canvas 宽度和高度上使用样式，只需将其设置为 c.width 和 c.height。我也会在绘制图像之前设置它们。还要为图像指定宽度和高度，并使用可见性而不是显示。这意味着您必须将位置设置为绝对位置才能将其从 html 流中删除。

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-whirl.jpg" id="img">
<canvas id="c" style="border:2px solid #001100" oncontextmenu="return false;">
  lol ur potato pc doesn't support canvas!!!
</canvas>

#img {
  position: absolute;
  width: 200px;
  height: 200px;
  visibility: hidden;
}

window.onload=function(){
  var c = document.getElementById("c");
  var ctx = c.getContext("2d");
  var img=document.getElementById("img");  
  c.height = img.getBoundingClientRect().height;
  c.width = img.getBoundingClientRect().width;
  ctx.drawImage(img, 1, 1);
}

在将 canvas 高度和宽度设置为 img.offsetHeight 和 img.offsetWidth 时显示一个黑色小方块

Shows a tiny black square on setting canvas height and width to img.offsetHeight and img.offsetWidth

html

javascript

canvas