无需 PHP 即可调整图形背景图像大小

发布于 2024-11-16 11:47:13 字数 1749 浏览 3 评论 0原文

我在 re 中读到了一些有用的答案。使用 PHP 和 max-height 等调整图像大小：图像调整大小脚本

但是，我的问题是我想要调整我从另一个站点 (USGS) 检索的图表图像的大小，并将其放入支持 HTML 和 JavaScript 但不支持 PHP 的站点 (zenfolio) 中。我尝试过调整指定的高度和宽度，但最终只调整页面上显示的图像数量，而不是图像本身（抱歉，我无法发布图像，因为我是新用户）。

我只是将它们发布为上面的 png 来演示问题，但图像生成如下：

<div id="riverlevels"> 
    <center> 
        <div id="MyWidget" style="background-image:url(http://waterdata.usgs.gov/nwisweb/graph?agency_cd=USGS&amp;site_no=12354500&amp;parm_cd=00065&amp;period=21);width:576px;Height:400px;"> 
            <br/> 
            <a href="http://montanariverphoto.com" style="line-height: 3em; font-family:times; font-size:12px; text-decoration:none; color:#000033" target="_blank">Montana River Photography </a></div> 
    </center> 
</div>
        </div>

可以使用此 JavaScript 生成相同的图像，但由于某种原因，不允许我在每页显示多个变量图（我想要显示流量 (00060) 和标距高度 (00065))：

<script type="text/javascript"> 
wStation = "12354500";
wDays = "21";
wType = "00065";
wWidth = "576px"; 
wHeight = "400px";
wFColor = "#000033";
wTitle = "";
document.write('<div id="gageheight"></div>');
document.write('<scr'+'ipt type="text/JavaScript"src="http://batpigandme.com/js/showstring.js"></scr'+'ipt>');

如您所知，我必须使用我拥有的单独站点来创建 JavaScript 文件。这些图表当前位于以下位置的不同迭代中： montanariverphoto.com/test 克拉克叉规高度

如果我错过了一个明显的答案，我真诚地道歉！我基本上是通过对另一个站点的小部件进行逆向工程来创建这个小部件的，所以也许我的调用完全不正确。

原文

I've read several helpful answers in re. image resizing using PHP and max-height etc.: Image resize script

However, my problem is that I want to resize an image of a graph that I am retrieving from another site (USGS), and putting into a site (zenfolio) that supports HTML and JavaScript, but not PHP. I have tried adjusting the specified height and width, but keep on ending up resizing only the amount of the image that shows on the page, and not the image itself (sorry I cannot post images as I am a new user).

I just posted them as png's above to demonstrate the problem, but the images are generated as follows:

<div id="riverlevels"> 
    <center> 
        <div id="MyWidget" style="background-image:url(http://waterdata.usgs.gov/nwisweb/graph?agency_cd=USGS&site_no=12354500&parm_cd=00065&period=21);width:576px;Height:400px;"> 
            <br/> 
            <a href="http://montanariverphoto.com" style="line-height: 3em; font-family:times; font-size:12px; text-decoration:none; color:#000033" target="_blank">Montana River Photography </a></div> 
    </center> 
</div>
        </div>

This same image can be generated using this JavaScript, but for some reason that does not allow me to display more than one variable graph per page (I want to show both discharge (00060), and gage height (00065)):

<script type="text/javascript"> 
wStation = "12354500";
wDays = "21";
wType = "00065";
wWidth = "576px"; 
wHeight = "400px";
wFColor = "#000033";
wTitle = "";
document.write('<div id="gageheight"></div>');
document.write('<scr'+'ipt type="text/JavaScript"src="http://batpigandme.com/js/showstring.js"></scr'+'ipt>');

As you can tell, I have to use a separate site that I own to create the JavaScript file. The graphs are currently located in various iterations at:
montanariverphoto.com/test
clark fork gage height

I sincerely apologize if I have missed an obvious answer to this! I basically created this widget by reverse engineering a widget from another site, so perhaps my call is incorrect all together.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

生生漫 2024-11-23 11:47:13

它绝对必须是背景图片吗？可以缩放它们（使用 background-size），但此属性没有得到很好的支持（基本上它在 Internet Explorer 中不起作用）。如果您可以使用图像标签，您的代码几乎可以按原样工作：

<img src="http://waterdata.usgs.gov/nwisweb/graph?agency_cd=USGS&site_no=12354500&parm_cd=00065&period=21" width="576" height="400" alt="..." />

对于您的其他问题，id 在页面上需要是唯一的。在您的代码示例中，您将创建一个 ID 为 gageheight 的 div，该 ID 被硬编码到位于 http://batpigandme.com/js/showstring.js。由于页面上只能有一个具有此 ID 的元素，因此如果稍后重复该代码，它将不起作用。您需要更改此脚本，以便可以将 ID 作为变量传递，例如：

wTitle = "";
wElement = "gageheight";
document.write('<div id="gageheight"></div>');
document.write('<scr'+'ipt type="text/JavaScript"src="http://batpigandme.com/js/showstring.js"></scr'+'ipt>');

然后在 JS 中：

var myElement = document.getElementById(wElement);
var JavaScriptCode = document.createElement("script");
JavaScriptCode.setAttribute('type', 'text/javascript');
JavaScriptCode.setAttribute("src", 'http://batpigandme.com/js/data2.js');
myElement.appendChild(JavaScriptCode);

Does it absolutely have to be a background image? Scaling them is possible (using background-size), but this property is not well supported (basically it won't work in Internet Explorer). Your code would work almost as-is if you can use an image tag instead:

<img src="http://waterdata.usgs.gov/nwisweb/graph?agency_cd=USGS&site_no=12354500&parm_cd=00065&period=21" width="576" height="400" alt="..." />

for your other problem, ids need to be unique on a page. In your code example you are creating a div with the id of gageheight, and this is ID is hardcoded into your javascript file at http://batpigandme.com/js/showstring.js. Since you can only have one element with this ID on the page, if you repeat the code later on it won't work. You'd need to change this script so that you could pass in the ID as a variable, something like:

wTitle = "";
wElement = "gageheight";
document.write('<div id="gageheight"></div>');
document.write('<scr'+'ipt type="text/JavaScript"src="http://batpigandme.com/js/showstring.js"></scr'+'ipt>');

and then in your JS:

var myElement = document.getElementById(wElement);
var JavaScriptCode = document.createElement("script");
JavaScriptCode.setAttribute('type', 'text/javascript');
JavaScriptCode.setAttribute("src", 'http://batpigandme.com/js/data2.js');
myElement.appendChild(JavaScriptCode);

回复收藏 0 原文

~没有更多了~