javascript - 如何在不显示 :none? 的情况下删除重复图像

Question

我正在为网站上的标题制作各种分层图像。这将包含以各种简单方式制作动画的独立组件，有些组件需要混合模式，因此我显然必须使用 HTML5 Canvas。

我做了一些关于如何插入图像的研究，我发现了这个:

$(document).ready(function(){
var canvas = document.getElementById("myCanvasName");
var ctx = canvas.getContext("2d");
var image = document.getElementById("myImageToInsert");
canvas.height = image.offsetHeight;
canvas.width = image.offsetWidth; //to set the canvas's dimensions, to allow for a responsive design
ctx.drawImage(base,0,0);
});

很简单，我抓取 HTML <img>标记，并将其包含在 Canvas 中。问题是现在我的标记中有两个图像: Canvas 和 <img>标记 Canvas 正在绘制。这显然是不可取的。

如果我尝试设置 display:none在 <img> 上它也会影响 Canvas 元素(并导致它不显示图像)。

我的问题:如何在不使用标记的情况下将图像导入 Canvas，或者如何隐藏源图像？

这是一个 fiddle ，您可以看到有两个图像(一个 Canvas )并且显示无将影响它们两个。 (即使它只在图像标签上调用):http://jsfiddle.net/9z9x1gb7/

Answer 1

您遇到的实际问题是带有 display:none 的图像的高度和宽度为零。如果将 Canvas 设置为固定尺寸(例如 500 x 500)，您将看到图像。至于如何在不显示图片的情况下获取图片的宽高，不妨看看下面的内容:

jQuery - Get Width of Element when Not Visible (Display: None)

How to get the height of a hidden image?

Preloading images with jQuery