问题标签 [drawimage]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
7293 浏览

javascript - 传递使用 jQuery 找到的图像时,HTMLCanvasContext.drawImage() 失败

我的代码的想法是创建一个隐藏的 div 来加载图像。当它的加载事件被触发时,在画布中绘制它。当我运行代码时,我收到此错误 0x80040111 (NS_ERROR_NOT_AVAILABLE),但我正在等待加载事件。这是我的代码。

HTML

和 javascript

else 部分现在被注释掉了,但是对于不支持画布的浏览器来说。

0 投票
2 回答
1964 浏览

graphics - Graphics.DrawImage 变暗了?

我使用 DrawImage Image 函数将图像的一部分复制到另一个图像。是否有可能使复制的部分“更暗”?比如,特殊的色调?有人可以给我一个例子吗?我听说过一种叫做 ImageAttributes 的东西,但我找不到它!

注意:我不想编辑源图像。

0 投票
1 回答
797 浏览

javascript - 画布清算问题。在 Canvaseroids 中选择未清除的对象

我正在使用 html5 画布创建一个新的小行星游戏。它一直进展顺利,以至于我必须动态地将激光绘制到舞台上。它们不能正确绘制(它们应该只有 10 像素长),并且当您在 10 秒内拍摄两次时,就会出现旧的激光轨迹。这是网址,因为代码比我愿意让每个人都通过的要多。

http://marccannon.com/canvasteroids/

理想情况下,激光的长度为 10 像素,一旦用完(1 秒或 33 帧)就会消失。它们shift()脱离了不应再在绘图循环中运行它们的数组。似乎 Laser 对象类有某种内存。到目前为止,我已经花了好几个小时用激光轨迹制作太空艺术,而不是添加实际的小行星来撞击。有人请帮忙。我正在失去理智。

在此先感谢您的帮助。

0 投票
1 回答
1554 浏览

java - 绘制图像 Java api

drawImage(Image img, int x, int y, Color bgcolor, ImageObserver 观察者)

我想在上述方法中为 bg 颜色指定一个空颜色。它默认为黑色。我以为我可以指定 null 作为 bgcolor 的参数,但它不起作用。有任何想法吗?

我在用着

drawImage(img, 0, 0, null, this);

它可以工作,但是当我不想要颜色时只会画黑色。

0 投票
1 回答
1030 浏览

javascript - 画布中的图像就绪状态

是否可以在画布中使用 imagename.readyState ?

如果没有,是否有人知道一种方法来检测使用“drawImage”绘制到画布上的图像何时已加载并准备好显示?

我正在使用画布创建图像展示 - 选择图像时,我希望显示加载动画(我已经创建),直到满足加载条件。

我仍在学习使用 javascript,并且整天都在尝试无济于事 - 因此,对于缺少示例代码来显示和说明我的要求,我深表歉意!

0 投票
1 回答
1186 浏览

bitmap - 精确映射由 Graphics.DrawImage 缩放的像素

我有一个用于拉伸和绘制位图的 Winforms 应用程序,Graphics.DrawImage我需要帮助来准确理解源像素如何映射到目标。

理想情况下,我想编写一个函数,例如:

它采用源图像上的像素坐标并返回在缩放目标上与其对应的“左上”像素的坐标。

为清楚起见,这是一个简单的示例,其中 2x2 位图缩放为 4x4:

缩放示例

箭头说明了如何将点 (1,0) 输入 MapPixel:

应该给出 (2,0) 的结果。

使用以下逻辑使 MapPixel 适用于上述示例很简单:

但是我注意到这种幼稚的实现会由于舍入dst.Width而不是src.Width. 在这种情况下,DrawImage 需要选择一些像素来绘制比其他像素更大的像素,以使图像适合,我在复制其逻辑时遇到了麻烦。

下面的代码通过将 2x1 位图缩放到几个不同的宽度来演示这个问题:

这是原始src图像和输出dst图像的样子,以及一些显示 MapPixel 需要如何映射蓝色像素的数字:

缩放示例

我一生都无法弄清楚 DrawImage 是如何决定放大哪个像素的。它似乎有时向上取整,有时向下取整。我不在乎它选择哪个,但我需要它是可预测的,我的功能才能正常工作。

我尝试修改上面的 MapPixel 示例以使用MidpointRounding.AwayFromZero,甚至替换Math.Round为四舍五入到最接近的奇数的函数(稍微改善了结果,但仍然不完美)。我还尝试让 Graphics 类处理缩放 - 即我设置ScaleTransform、调用DrawImageUnscaled然后尝试使用它TransformPoints来转换坐标。有趣的是,TransformPoints 方法的结果并不总是与 DrawImage 和 DrawImageUnscaled 所做的一致。

我也尝试挖掘 GDI+ 以获取提示,但还没有发现任何有用的东西。

我不想为了保持对它降落位置的可预测性而不得不单独绘制每个像素。

如果您想知道,我使用的原因InterpolationMode.NearestNeighbor是避免抗锯齿(我需要保持单个像素的保真度),并且PixelOffsetMode.Half包含在内是因为如果它不存在,那么 DrawImage 会将我的位图平移半个像素。

问题点的更多示例包括将 4px 缩放到 13px 时 x=7,以及将 4px 缩放到 17px 时 x=8。

如果需要,我可以发布完整的单元测试代码,允许您插入并验证 MapPixel 函数。到目前为止,我能够达到 100% 准确度的唯一方法是通过一个丑陋的 hack,它生成一个“提示”源图像,其中每个像素都设置为唯一的颜色。它通过检查提示图像中的颜色来映射坐标,然后在提示图像的缩放版本中查找该颜色。优化是可能的(例如,提示图像的宽度或高度为单像素,上面的幼稚逻辑用于猜测近似答案并从那里向外工作),但它仍然很丑陋。

如果有人能阐明 DrawImage 背后的管道并帮助我为 MapPixel 提出一个更简单(但仍然准确)的实现,我将不胜感激。

0 投票
3 回答
1457 浏览

java - 找不到符号方法 drawImage(SlidingBlockModel, int, int, int, int,)

我正在尝试制作一个滑块游戏。在这个类中,我使用了 drawImage 方法来显示“拼图”的块,使用 Graphics 对象 g2 的 drawImage 方法。但是在绘画类方法中,我得到了这个错误:找不到符号方法drawImage(SlidingBlockModel,int,int,int,int,)。有什么建议么?感谢您花时间阅读本文。先感谢您。:)

佐伊

代码如下:

0 投票
1 回答
254 浏览

javascript - 奇怪的画布绘制行为

我有一个 CodeIgniter 应用程序,它允许企业在线完成某些报告。报告的一部分是它们可以在车辆上指出发生损坏的位置。我通过有一个他们可以绘制的画布来做到这一点。

问题是在绘制背景图像(汽车)时存在一些非常奇怪的行为,他们在其上绘制箭头以显示影响等......

这是Javascript(作为整个脚本的一部分):

这都是名为 vehicle_canvas.js 的脚本的一部分。现在这就是奇怪行为的来源。这个脚本被称为

<script type="text/javascript" src="/intranet/js/vehicle_canvas.js"></script>

在位于 /intranet/application/views/view_instruction.php 的视图文件中

该脚本只是没有绘制车辆图像,而是正确地执行了其他所有操作,然后它突然起作用了,原因是我不小心将 vehicle_canvas.js 上传到了不同的文件夹 /intranet/pdfs/ 而不是 /intranet/ js/. 现在,如果我从 /pdfs/ 中删除脚本,它将无法正常工作。/pdfs/ 在我的任何视图文件或 Javascript 调用中都没有出现。

有任何想法吗?

这是供参考的文档树:

0 投票
1 回答
2652 浏览

javascript - 在 Iphone Web 应用程序上使用画布 drawImage() 函数

我正在为 Iphone 开发一个网络应用程序。我有一个使用画布的网页,我使用画布 drawImage() 函数在该画布上绘制线条、方舟、圆圈和一些图像。该页面在 windows chrome、windows safari、OSX chrome 和 OSX safari 但不是 iphone safari 中加载并运行良好。

它似乎停在 drawImage() 函数上。我搜索了有关 Iphone 是否支持画布 drawImage 功能的信息,但找不到任何东西。我错过了什么?

0 投票
1 回答
1472 浏览

javascript - createElement('canvas') 代码适用于 Safari,但不适用于 Firefox、Chrome

我正在尝试一个简单的查询,它获取图像并将其数据加载到变量中。此代码适用于 Safari(5),但不适用于 Firefox(3.6.3 for Mac)或 Chrome(10 for Mac)。

这是代码:http: //jsfiddle.net/saTzx/

知道可能出了什么问题吗?

与此代码相关的另一个问题是,drawImage() 不应该实际绘制图像吗?这在任何浏览器中都不会发生。