如何删除重复的图像而不显示:无

How can I remove a duplicate image without display:none?

本文关键字：图像 显示 何删除 删除      更新时间：2023-09-26

我正在制作一个网站标题的分层图像。这将有单独的组件以各种简单的方式动画，有些需要混合模式，所以我显然必须使用HTML5画布。

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

$(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>标签。这显然是不可取的。

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

我的问题:我如何将图像导入画布而不使用标记，或者我如何隐藏源图像?

这是一个小提琴，你可以看到有两个图像(一个画布)，显示不将影响他们两个。(即使它只在image标签上调用):http://jsfiddle.net/9z9x1gb7/

实际问题是display:none的图像具有零高度和宽度。如果你将画布设置为固定尺寸(例如500 x 500)，你将看到图像。至于如何在不显示图像的情况下获取图像的宽度和高度，您可能需要查看以下内容:

jQuery -获取元素不可见时的宽度(Display: None)

如何获得隐藏图像的高度?

使用jQuery预加载图片

  1. 你需要确保你的图像是实际加载之前绘制它。$(document).ready(…)从不等待其他资源加载。
  2. 你需要准确地获得图像的尺寸。如果你把它建立在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;
});

你可以这样尝试:

$(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>

希望这对你有帮助!

您应该能够在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/

相关文章：