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>标记，并将其包含在画布中。问题是，现在我的标记中有两个图像：画布和画布正在绘制的<img>标记。这显然是不可取的。

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

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

这是一个小提琴，你可以看到有两个图像（一个画布）和显示没有会影响它们。（即使它仅在图像标签上调用）：http://jsfiddle.net/9z9x1gb7/

Answer 1

您遇到的实际问题是display:none的图片高度和宽度均为零。如果将画布设置为固定尺寸（例如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

Answer 2

在绘制图像之前，您需要确保图像实际已加载。 `$（document）.ready（...）永远不会等待加载其他资源。
您需要准确地获取图像的尺寸。如果你的基础是已经在DOM树中的东西，那么，它很可能是可行的，但考虑到所有样式限制等等......祝你好运！每当我想要将一些图像绘制到画布而没有任何外部库时，我总是创建一个新图像。

见下文：

$(document).ready(function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var duckOrg = document.getElementById("duckImg");
    var duck = new Image();
    duck.onload = function() {
        canvas.height = duck.height;
        canvas.width = duck.width; //to set the canvas's dimensions, to allow for a responsive design
        //alert(duckOrg.src);
        ctx.drawImage(duck, 0, 0);
    }
    duck.src = duckOrg.src;
});

Answer 3

你可以这样试试：

$(document).ready(function () {

    var canvas = document.getElementById("myCanvas"),
        ctx = canvas.getContext("2d"),
        duck = new Image(),
        updateCanvas = function () {
            canvas.height = duck.height;
            canvas.width = duck.width; //to set the canvas's dimensions, to allow for a responsive design
            ctx.drawImage(duck, 0, 0);
        };

    duck.onload = updateCanvas;
    duck.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Anas_platyrhynchos_male_female_quadrat.jpg/640px-Anas_platyrhynchos_male_female_quadrat.jpg";

});

在HTML中：

<canvas id="myCanvas"></canvas>

希望这有帮助！

Answer 4

您应该能够在JS中执行以下操作，只使用HTML标记中的画布：

$(document).ready(function(){
    var myImg = new Image;
    myImg.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Anas_platyrhynchos_male_female_quadrat.jpg/640px-Anas_platyrhynchos_male_female_quadrat.jpg";
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    canvas.height = myImg.naturalHeight;
    canvas.width = myImg.naturalWidth;
    ctx.drawImage(myImg,0,0);
});

http://jsfiddle.net/9z9x1gb7/1/

如何在没有display：none的情况下删除重复的图像？

4 个答案: