如何删除没有显示的重复图像：无？答案

【问题标题】：How can I remove a duplicate image without display:none?如何删除没有显示的重复图像：无？
【发布时间】：2019-03-14 18:16:11
【问题描述】：

我正在为网站上的标题制作各种分层图像。这将具有以各种简单方式进行动画处理的单个组件，并且有些需要混合模式，因此我显然必须使用 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> 标签。这显然是不可取的。

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

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

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

【问题讨论】：

请创建一个小提琴...
@harry 会的 :) 等一下
@Harry Fiddle 已创建：jsfiddle.net/9z9x1gb7

标签： javascript css html canvas

【解决方案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

【讨论】：

有趣！我会检查一下并回复你。谢谢！

【解决方案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;
});

【讨论】：

【解决方案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>

希望这会有所帮助！

【讨论】：

哦，我不知道那个构造函数！我喜欢。让我稍微弄乱一下。
完美运行，谢谢！现在要弄清楚如何添加混合模式... 回到谷歌

【解决方案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/

【讨论】：