将图像渲染到另一个图像 [英] Blitting an image, to another

问题描述

大家好，祝所有朋友新年快乐！


没有错误的代码发布，只是一个问题。


我写了一个JavaScript应用程序，让用户可以查看图像，并且可以放大
。


我的方式"变焦"非常简单，真的（我希望你的

新闻阅读器显示带有等宽字体的文字..）：


原图：

+ ------------- +< = - < img> ;,绝对定位

| .....'''''''' '' '' '' '' |在< div style =" overflow：hidden;">

| .....''''< = - 用户放大该区域

| .....'''''''''''''|
+ ------------- +


缩放图像（x2）：

+ ------------------------- +< = - < img>

| ooooooooooooooooooooooooo |

| ooooooooo + ------------- +< = - < DIV>

| ooooooooo | ooooooooooooo | O |

| ooooooooo | ooooooooooooo | O |

| ooooooooo | ooooooooooooo | O |

| ooooooooo + ------------- + o |

| ooooooooooooooooooooooooo |

+ ------- ------------------ +

现在，用语言：我重新缩放< img>，将其重新定位在

< div>，让溢出：隐藏剪辑完成剩下的工作。


这样做很好，除了：

1）插值当​​然是线性的，给出一些难以阅读的

像素汤


2）如果用户缩放一个非常小的区域，< imghas可以重新缩放

可能是一个很大的因素。在FF和IE中，这可能会耗费大量内存（实际上，太多了，导致浏览器崩溃）。那是

......糟糕。

----


我想做什么：


为用户提供放大版的图像，而不使用

重新缩放黑客。


你会怎么做？有谁知道什么是最好的方法

来做它？


它必须在IE和FireFox中工作。我可以使用这些浏览器可用的任何技术，只要它可以用

javascript编写脚本。


任何想法都可以提供帮助！

谢谢，最好的问候

Arnaud

Hello everyone, and happy new year to all c.l.j''ers!

No bad code to post, just a question.

I wrote a JavaScript application that lets users view an image, and
zoom on it.

The way I "zoom" is pretty simple, really (I hope that your
newsreaders displays text with a monospace font..) :

Original image:
+-------------+ <=- <img>, absolutely positionned
|.....''''''''''''''''| inside a <div style="overflow:hidden;">
|.....'' ''<=- The user zooms that area
|.....''''''''''''''''|
+-------------+

Zoomed image (x2):
+-------------------------+ <=- <img>
|ooooooooooooooooooooooooo|
|ooooooooo+-------------+ <=- <div>
|ooooooooo|ooooooooooooo|o|
|ooooooooo|ooooooooooooo|o|
|ooooooooo|ooooooooooooo|o|
|ooooooooo+-------------+o|
|ooooooooooooooooooooooooo|
+-------------------------+
And now, with words: I re-scale the <img>, re-position it in the
<div>, and let the overflow:hidden clipping do the rest.

That works pretty fine, except that:

1) The interpolation is, of course, linear, giving some hard-to-read
pixel soup

2) If the user zooms a very small area, the <imghas to be re-scaled
by a possibly big factor. In both FF and IE, that can eat up a lot
of memory (too much, actually, crashing the browser). That''s
... bad.
----

What I''d like to do:

Give the user a zoomed-in version of the image, without using a
re-scaling hack.

How would you do that? Does anyone know what would be the best method
to do it?

It must be working in IE and FireFox. I can use any technology that''s
available with these browsers, as long as it''s scriptable with
javascript.

Any idea can help!
Thanks, and best regards
Arnaud

推荐答案

托马斯''PointedEars''Lahn< Po ********* @ web.dewrites：

Thomas ''PointedEars'' Lahn <Po*********@web.dewrites:

Arnaud Diederen（aundro）写道：

Arnaud Diederen (aundro) wrote:

大家好，祝所有新朋友新年快乐！

Hello everyone, and happy new year to all c.l.j''ers!

也谢谢你。

Thanks, to you too.

[...]

现在，用文字：我重新缩放< img>，将它重新定位在

< div>中，让溢出：隐藏剪辑完成其余的工作。


这样做很好，除了：


1）插值当​​然是线性的，给出了一些难以阅读的内容>
像素汤


2）如果用户放大一个非常小的区域，< imghas将被重新缩放

重要因素。在FF和IE中，这可能会耗费大量内存（实际上，太多了，导致浏览器崩溃）。那是

......糟糕。

----


我想做什么：


为用户提供放大版的图像，而不使用

重新缩放黑客。


你会怎么做？有谁知道什么是最好的方法

这样做？

[...]
And now, with words: I re-scale the <img>, re-position it in the
<div>, and let the overflow:hidden clipping do the rest.

That works pretty fine, except that:

1) The interpolation is, of course, linear, giving some hard-to-read
pixel soup

2) If the user zooms a very small area, the <imghas to be re-scaled
by a possibly big factor. In both FF and IE, that can eat up a lot
of memory (too much, actually, crashing the browser). That''s
... bad.
----

What I''d like to do:

Give the user a zoomed-in version of the image, without using a
re-scaling hack.

How would you do that? Does anyone know what would be the best method
to do it?

使用两个或更多图像。如果那样的话，将很难做到。

Use two or more images. 2) will be difficult to do, if that.

感谢您的回复，Thomas。


我刚刚想到了一个可能适用于FF的解决方案：


使用< canvasinstead of< img> ;;然后加载< imgin

背景，然后blit< imgin the< canvas>的部分。那个

应该这样做：< URL：

http://developer.mozilla.org/en/docs/Canvas_tutorial:Using_images#Slicing>


现在，我需要一些与IE非常相似的东西。

查看excanvas的代码。 （< URL：

http://excanvas.sourceforge.net/>）

显示''drawImage（）''操作已实现，因此它可能也可以使用
，但使用< img>的''img.src''属性。我认为可能还有另一种选择，如果我可以这么说的话，我会闻到一种更像是b $ b本地复制操作的东西。（即，

并不依赖于缓存）


再次，如果有人有任何想法，他们非常非常欢迎！


祝你好运，

Arnaud

Thanks for your reply, Thomas.

I''ve just thought of a solution that might work for FF:

Use a <canvasinstead of an <img>; then load the <imgin the
background, and blit the portion of the <imgin the <canvas>. That
should do: <URL:
http://developer.mozilla.org/en/docs/Canvas_tutorial:Using_images#Slicing>

Now, I need something pretty similar for IE.
Looking at the code of "excanvas" (<URL:
http://excanvas.sourceforge.net/>)
reveals that the ''drawImage()'' operation is implemented, and so it
might work as well, but uses the ''img.src'' attribute of the <img>. I
thought maybe there is another option, that''d smell a tad more like a
"native copy operation", if I may say so.. (i.e., something that
wouldn''t rely on the cache)

Again, if anybody has _any_ idea at all, they''re very, very welcome!

Best regards,
Arnaud

Arnaud Diederen（aundro）写道：

Arnaud Diederen (aundro) wrote:

托马斯''PointedEars''Lahn< Po ********* @ web.dewrites：

Thomas ''PointedEars'' Lahn <Po*********@web.dewrites:

> Arnaud Diederen（aundro）写道：

>Arnaud Diederen (aundro) wrote:

>> [...]
现在，用语言：我重新缩放< img>，将其重新定位在
< div>中，然后让溢出：隐藏剪辑完成剩下的工作。

这样做很好，除了：< 1）插值当​​然是线性的，给出一些难以阅读的像素汤

2）如果用户缩放一个非常小的区域，< imghas可以通过一个可能的重要因素重新缩放。在FF和IE中，这可能会占用大量内存（实际上，太多了，导致浏览器崩溃）。那是......不好。
----

我想做什么：

给用户一个放大版图像，不使用重新缩放黑客。

你会怎么做？有谁知道什么是最好的方法呢？

>>[...]
And now, with words: I re-scale the <img>, re-position it in the
<div>, and let the overflow:hidden clipping do the rest.

That works pretty fine, except that:

1) The interpolation is, of course, linear, giving some hard-to-read
pixel soup

2) If the user zooms a very small area, the <imghas to be re-scaled
by a possibly big factor. In both FF and IE, that can eat up a lot
of memory (too much, actually, crashing the browser). That''s
... bad.
----

What I''d like to do:

Give the user a zoomed-in version of the image, without using a
re-scaling hack.

How would you do that? Does anyone know what would be the best method
to do it?

使用两个或更多图像。如果那样的话，将很难做到。

Use two or more images. 2) will be difficult to do, if that.

感谢您的回复，Thomas。


我刚刚想到了一个可能适用于FF的解决方案：


使用< canvasinstead of< img> ;;然后加载< imgin

背景，然后blit< imgin the< canvas>的部分。那个

应该：< URL：

http://developer.mozilla.org/en/docs/Canvas_tutorial:Using_images#Slicing>

Thanks for your reply, Thomas.

I''ve just thought of a solution that might work for FF:

Use a <canvasinstead of an <img>; then load the <imgin the
background, and blit the portion of the <imgin the <canvas>. That
should do: <URL:
http://developer.mozilla.org/en/docs/Canvas_tutorial:Using_images#Slicing>

你不需要专有的'canvas''元素。

You don''t need the proprietary `canvas'' element for that.

[。 ..]

再次，如果有人有任何想法，他们非常非常欢迎！

[...]
Again, if anybody has _any_ idea at all, they''re very, very welcome!

我使用了修改后的放大镜代码来自
< http://www.namibia-cd.com/menu/js/magnifier。 htmfor

< http://rtc-ski.ch/magnifier.js Go eg

< http://rtc-ski.ch/ski/modelle/28er/28erand点击下面的放大镜图标

，看看它是否适合滑雪。另请注意，这是一个快速的黑客攻击。


但我担心，除非你使用'canvas''，否则你加载的图像是
背景必须非常大（因此加载速度慢）如果

你需要一个上下文敏感的缩放系数。

PointedEars

- -

使用任何版本的Microsoft Frontpage创建您的网站。 （这不会是b $ b阻止人们查看你的来源，但是没有人会想要窃取它。）"

- 来自< http：// www.vortex-webdesign.com/help/hidesource.htm>

I used modified magnifier code from
<http://www.namibia-cd.com/menu/js/magnifier.htmfor
<http://rtc-ski.ch/magnifier.js Go e.g. to
<http://rtc-ski.ch/ski/modelle/28er/28erand click the magnifier icon
below to see it working on the ski. Also note that it was a quick hack.

But I''m afraid that unless you use `canvas'', the image you load in the
background will have to be very large (and therefore slow to load) if
you need a context-sensitive zoom factor.
PointedEars
--
"Use any version of Microsoft Frontpage to create your site. (This won''t
prevent people from viewing your source, but no one will want to steal it.)"
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

Thomas''PointedEars''Lahn< Po ********* @ web .dewrites：

Thomas ''PointedEars'' Lahn <Po*********@web.dewrites:

[deletia]


我使用了修改过的放大镜代码来自

< http://www.namibia-cd.com/menu/js/magnifier.htmfor

< http://rtc-ski.ch/magnifier.js Go eg

< http://rtc-ski.ch/ski/modelle/28er/28erand点击下面的放大镜图标

，看看它是否适合滑雪。另请注意，这是一个快速的黑客攻击。


但我担心，除非你使用'canvas''，否则你加载的图像是
背景必须非常大（因此加载速度慢）如果你需要一个上下文敏感的缩放系数。

[deletia]

I used modified magnifier code from
<http://www.namibia-cd.com/menu/js/magnifier.htmfor
<http://rtc-ski.ch/magnifier.js Go e.g. to
<http://rtc-ski.ch/ski/modelle/28er/28erand click the magnifier icon
below to see it working on the ski. Also note that it was a quick hack.

But I''m afraid that unless you use `canvas'', the image you load in the
background will have to be very large (and therefore slow to load) if
you need a context-sensitive zoom factor.

嗨再次托马斯，


你所提出的解决方案与我所提出的解决方案有相同的缺点/>
之前使用：它需要一个大图像。


此外，在这些例子中，大图像也是如此。对于较小的图像有一个固定的缩放系数，

。

在我的用例中，用户可以按框缩放，他就是那个确定

的盒子范围，所以我不可能知道图像将需要放大多少...（并且用户可能会选择缩放一个非常小的<原始图像上的
框，要求它按一个巨大的因子缩放

（例如x10000））。


不过谢谢！


A.

Hi again Thomas,

that solution you''re proposing has the same drawbacks as the one I was
using before: It requires a "big image".

Besides, in those examples, the "big image" has a fixed zoom factor,
against the "smaller image".
In my use-case, the user can zoom by box, and he''s the one determining
the box extents, so I cannot possibly know how much the image will
have to be zoomed in.. (and the user might choose to zoom a very small
box on the original image, requiring it to be scaled by a huge factor
(x10000, for example)).

Thanks, though!

A.

这篇关于将图像渲染到另一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！