天道酬勤,学无止境

Resize Image() object with javascript not working

I have an image object in javascript, which I am using as the background of a pong game. However, the image is larger than the canvas, so I attempted shrinking it with this

var bg=new Image(); 
bg.src='bg.png';
bg.width=600;
bg.height=400;

However, in the canvas, the image did not change sizes. Does anyone know what is causing this?

评论

To resize the entire image, instead of resizing it manually from the source, add the width and height parameters into the drawImage() method, like this

 ctx.drawImage(bg,0,0,600,400);

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Javascript图像调整大小(Javascript Image Resize)
    问题 有谁知道如何使用JavaScript按比例调整图像大小? 我试图通过动态添加属性height和width来修改DOM,但似乎在IE6上不起作用。 回答1 要按比例修改图像,只需仅更改width / height css属性之一,将另一个设置为auto。 image.style.width = '50%' image.style.height = 'auto' 这样可以确保其长宽比保持不变。 请记住,浏览器往往在很好地调整图像大小吸-你可能会发现,你的调整后的图像看起来可怕。 回答2 好了,解决了,这是我的最终代码 if($(this).width() > $(this).height()) { $(this).css('width',MaxPreviewDimension+'px'); $(this).css('height','auto'); } else { $(this).css('height',MaxPreviewDimension+'px'); $(this).css('width','auto'); } 多谢你们 回答3 我在这里回答了这个问题:如何按比例调整图像大小/保持宽高比? 我将其复制到此处,因为我真的认为这是一种非常可靠的方法:) /** * Conserve aspect ratio of the original region. Useful
  • Resize a HTML 5 canvas and its content in pure Javascript
    I would like to implement a "zoom" function in my Web App to resize a canvas and its content proportionally (I don't care about dirty quality). Here's my code. It resets the canvas each time we want to zoom in order to get an Image object (for using drawImage method), resize the canvas, and then use drawImage method to resize content proportionally... var Editor = { // The following variables contains informations // about the original canvas data: ..., // imageData width: 200, height: 50, // Zoom canvas zoomCanvas: function(zoom){ // zoom in percents var canvas = $('#canvas').get(0); var
  • 在纯 Javascript 中调整 HTML 5 画布及其内容的大小(Resize a HTML 5 canvas and its content in pure Javascript)
    问题 我想在我的 Web 应用程序中实现一个“缩放”功能来按比例调整画布及其内容的大小(我不关心脏质量)。 这是我的代码。 每当我们要缩放以获取Image对象(使用drawImage方法)时,它将重置画布,调整画布的大小,然后使用drawImage方法按比例调整内容的大小... var Editor = { // The following variables contains informations // about the original canvas data: ..., // imageData width: 200, height: 50, // Zoom canvas zoomCanvas: function(zoom){ // zoom in percents var canvas = $('#canvas').get(0); var context = canvas.getContext(); var data = this.data; var scale = zoom / 100; var width = this.width * scale; var height = this.height * scale; // Reset canvas to original size and imageData this.resizeCanvas(this.width
  • Resizing images with javascript using canvas elements
    I'm having a hard time to understand how to work with canvas elements in JavaScript. I'm implementing a resize feature where user can resize image inside the lightbox. The lightbox will launch after preview image is been clicked. Inside the lightbox element, in addition of the image itself, there are two input fields for width and height. The objective is to generate a copy of the original image in base64 format and send it to the server along with given width and height as query parameters and let the server side do the resize operation (I'm using PHP for my back end) or even better, let
  • 在不使用画布的情况下在JavaScript中调整Base-64图像的大小(Resize a Base-64 image in JavaScript without using canvas)
    问题 我需要一种无需使用HTML元素即可在JavaScript中调整图片大小的方法。 我的移动HTML应用程序捕获照片,然后将它们转换为base64字符串。 此后,在将它们发送到API之前,我需要调整它们的大小,以节省存储空间。 我正在寻找一种比使用canvas元素更不同且更合适的调整大小的方法,有没有办法? 回答1 避免主HTML受到影响的一种方法是创建一个屏幕外的画布,该画布不在DOM树之内。 这将提供位图缓冲区和本地编译代码以对图像数据进行编码。 直接这样做: function imageToDataUri(img, width, height) { // create an off-screen canvas var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); // set its dimension to target size canvas.width = width; canvas.height = height; // draw source image into the off-screen canvas: ctx.drawImage(img, 0, 0, width, height); // encode image to data-uri with
  • 使用CSS按比例调整图像大小? [复制](Resize image proportionally with CSS? [duplicate])
    问题 这个问题已经在这里有了答案: 如何自动调整图像大小以适合“ div”容器? (33个答案) 2年前关闭。 有没有一种方法可以仅使用CSS按比例调整图像大小(缩小)? 我正在使用JavaScript方式,但只是尝试查看CSS是否可行。 回答1 要使用CSS按比例调整图像大小,请执行以下操作: img.resize { width:540px; /* you can use % */ height: auto; } 回答2 控制大小并保持比例: #your-img { height: auto; width: auto; max-width: 300px; max-height: 300px; } 回答3 如果是背景图像,请使用background-size:contain。 示例CSS: #your-div { background: url('image.jpg') no-repeat; background-size:contain; } 回答4 尝试 transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); 回答5 您可以使用对象适合属性: .my-image { width: 100px; height: 100px; object
  • 如何调整html canvas元素的大小?(How to resize html canvas element?)
    问题 我有一个在HTML中静态定义的宽度和高度的canvas元素。 如果我尝试使用JavaScript动态调整其大小(在画布的属性上或通过样式属性设置新的宽度和高度),则在Firefox中会出现以下错误: 未捕获的异常:[异常...“对WrappedNative原型对象的非法操作” nsresult:“ 0x8057000c(NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)”位置:“ JS框架:: file:///home/russh/Desktop/test.html :: onclick ::第1行”数据:否] 是否可以调整此元素的大小,或者我是否必须销毁它并动态创建一个新元素? 回答1 您没有发布代码,我怀疑您做错了什么。 可以通过使用数字分配width和height属性来更改大小: canvasNode.width = 200; // in pixels canvasNode.height = 100; // in pixels 至少对我有用。 确保您没有分配字符串(例如,“ 2cm”,“ 3in”或“ 2.5px”),并且不要弄乱样式。 实际上,这是一个公开可用的知识-您可以在HTML canvas规范中阅读有关它的全部信息-它很小,而且提供的信息异常丰富。 这是整个DOM接口: interface HTMLCanvasElement
  • 使用CSS(可能还使用JavaScript)将元素设置为正方形(或保持特定的宽高比)(Use CSS (and maybe JavaScript) to make an element be square (or maintain a specific aspect ratio))
    问题 我有一个div,我希望具有以下特征: 宽度=其父元素的50% 高度等于保持一定的纵横比所需的高度。 我需要使用百分比,因为当调整浏览器的大小时,对象将左右调整大小。 我希望对象从上到下调整大小,以确保对象保持相同的宽高比。 我不认为有任何方法可以使用纯CSS来做到这一点,但是有人知道吗? 另外,有没有简单的JavaScript方法可以做到这一点? (jQuery很好。) 回答1 尽管您需要使用透明图像,但我想出了如何在不使用js的情况下执行此操作。 设置类似以下内容的html结构: <div class="rect_container"><img class="rect_image" src="rect_image.png"/> <div class="rect">Your favorite content here</div> </div> 对rect_image使用AxB透明png,其中AxB是宽高比。 同时设置一个样式表,如下所示: .rect_container {width: 50%; position: relative;} .rect_image {width: 100%; display: block;} .rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}
  • 垂直居中响应图像(Vertically Center Responsive Image)
    问题 我想知道是否有一种简单的方法可以使响应图像垂直居中。 请参考以下jsFiddle:http://jsfiddle.net/persianturtle/yawTb/1/ 基本HTML: <img class="mobile-title-size" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo"> 基本CSS: .mobile-title-size { position: absolute; top: 2.5%; left: 6%; width: 70%; max-width: 300px; } 这是移动标头,使用的图像与平板电脑和桌面视口上显示的图像相同。 由于该图像已经被加载,因此我希望使用同一图像,将其调整为较小的尺寸并垂直对齐,以便可以在所有视口中使用一个图像。 问题:在调整浏览器大小时,图像确实变小了,但没有在中心垂直对齐。 目标:即使在此示例中宽度重叠严重,在我的网站上也不是问题。 目标只是在浏览器调整大小时使图像垂直居中。 我可以使用javascript / jQuery解决方案,但当然,首选简单CSS。 任何帮助是极大的赞赏! 回答1 有几种方法可以做到这一点-纯粹是CSS或基于JS的方法。 更新的答案 更新:随着CSS转换支持的出现,这是使用纯CSS定位元素的一种非常优雅的解决方案。
  • jQuery或Javascript检查是否加载了图片(jQuery or Javascript check if image loaded)
    问题 我知道在Stackoverflow上有很多这样的工具,但是在最新版本的jquery(1.10.2)中我找不到适合我的工具。 我确实尝试过: $(".lazy").load(function (){} 但我相信经过一些研究后,使用.load检测图像负载在jQuery 1.8中已被弃用。 我需要做的是在加载图像后触发图像调整大小功能。 我无法控制HTML,目前我不得不通过在页面加载后通过附加属性(通过.attr() )来通过jQuery添加图像尺寸,以便可以使用lazyload js。 问题是,我需要一种正确的方法来推迟所有各种脚本,直到正确加载映像为止,否则有时有时会在加载每个映像之前触发该功能。 我试过使用$(window).load(function (){}); 但是有时它仍然会在加载每个图像之前触发。 回答1 我通常这样做: var image = new Image(); image.onload = function () { console.info("Image loaded !"); //do something... } image.onerror = function () { console.error("Cannot load image"); //do something else... } image.src = "/images/blah/foo
  • 可以按百分比创建地图HTML区域吗?(Is possible create map html area in percentage?)
    问题 我需要创建这样的东西: http://www.mrporter.com/journal/journal_issue71/2#2 大图上的每个产品都与鼠标悬停时显示的工具提示相关联。 但是我需要使用它来处理全屏图像。 我认为的第一个解决方案(如上面的示例)是map html解决方案,其中每个解决方案都完全满足了我产品的边界。 问题是我无法为我指定精确值,因为我的图像大小取决于窗口屏幕。 最好的解决方案是为我的区域设置百分比值的可能性。 这可能吗? 还有其他建议吗? 回答1 使用链接的替代解决方案: CSS: .image{ position: relative; } .image a{ display: block; position: absolute; } HTML: <div class="image"> <img src="image.jpg" alt="image" /> <a href="http://www.example.cz/1.html" style="top: 10%; left: 10%; width: 15%; height: 15%;"></a> <a href="http://www.example.cz/2.html" style="top: 20%; left: 50%; width: 15%; height: 15%;"></a> <a
  • 调整浏览器大小时使用jQuery更改图像src(Using jQuery to change image src when browser is resized)
    问题 我有两个不同尺寸的图像,一个用于小于759px的屏幕,另一个用于大于759px的屏幕。 我设法获取图像的来源,以便在文档加载时根据窗口宽度进行更改。 但是我真的很希望能够在调整浏览器大小的同时执行此操作,但是对于我一生来说,我无法做到这一点,它似乎仅在最初加载页面时有效。 这是我的代码: $(document).ready(function() { function imageresize() { var contentwidth = $(window).width(); if ((contentwidth) < '700'){ $('.fluidimage').each(function(){ var thisImg = $(this); var newSrc = thisImg.attr('src').replace('x2', 'x1'); thisImg.attr('src', newSrc); }); } else { $('.fluidimage').each(function(){ var thisImg = $(this); var newSrc = thisImg.attr('src').replace('x1', 'x2'); thisImg.attr('src', newSrc); }); } } imageresize();//Triggers
  • 使用javascript画布调整图像大小(平滑)(Resize image with javascript canvas (smoothly))
    问题 我正在尝试使用画布调整某些图像的大小,但是我对如何使其平滑一无所知。 在Photoshop,浏览器等上。它们使用一些算法(例如双三次,双线性),但是我不知道这些算法是否内置在画布中。 这是我的小提琴:http://jsfiddle.net/EWupT/ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300 canvas.height=234 ctx.drawImage(img, 0, 0, 300, 234); document.body.appendChild(canvas); 第一个是正常尺寸的图像标签,第二个是画布。 请注意,画布如何不那么光滑。 如何获得“平滑度”? 回答1 您可以使用降级以获得更好的结果。 调整图像大小时,大多数浏览器似乎使用线性插值而不是双三次插值。 (更新在规范中添加了quality属性imageSmoothingQuality,该属性仅在Chrome中可用。) 除非没有选择平滑或最接近的邻居,否则浏览器将始终在缩小图像后对图像进行插值,因为该功能用作低通滤波器以避免混叠。 双线性使用2x2像素进行插值,而双三次使用4x4进行插值,因此,通过逐步执行此操作,可以在使用双线性插值时接近双三次结果
  • 响应式图像图(Responsive image map)
    问题 我有一个响应式html布局中的现有图像映射。 图像根据浏览器大小缩放,但是图像坐标显然是固定的像素大小。 我必须选择哪些选项来调整图像地图坐标的大小? 回答1 对于自适应图像地图,您将需要使用插件: https://github.com/stowball/jQuery-rwdImageMaps(不再维护) 或者 https://github.com/davidjbradshaw/imagemap-resizer 没有主流浏览器正确理解百分比坐标,并且所有浏览器都将百分比坐标解释为像素坐标。 http://www.howtocreate.co.uk/tutorials/html/imagemaps 还有此页面,用于测试浏览器是否实现 http://home.comcast.net/~urbanjost/IMG/resizeimg3.html 回答2 您也可以使用svg代替图像映射。 ;) 有一个有关如何执行此操作的教程。 这是jsfiddle,具有一些不错的悬停效果,描述和链接:http://jsfiddle.net/eLbpmsaj/ .hover_group:hover { opacity: 1; } #projectsvg { position: relative; width: 100%; padding-bottom: 77%; vertical-align
  • HTML img缩放(HTML img scaling)
    问题 我正在尝试显示一些带有HTML img标签的大图像。 此刻,它们离开了屏幕的边缘。 如何缩放它们以使其停留在浏览器窗口中? 还是在不可能的情况下,至少可以说“以其正常宽度和高度的50%显示此图像”? width和height属性使图像变形-据我所知,这是因为它们引用了容器最终可能具有的任何属性,而这些属性与图像无关。 我无法指定像素,因为我必须处理大量具有不同像素大小的图像集合。 最大宽度无效。 回答1 仅设置width或height ,它将自动缩放其他值。 是的,您可以使用一个百分比。 第一部分可以完成,但是需要JavaScript,因此可能不适用于所有用户。 回答2 CSS足够了: width : desired_width; height: auto;/*to preserve the aspect ratio of the image*/ 回答3 我知道这个问题已经问了很长时间了,但是到今天为止,一个简单的答案是: <img src="image.png" style="width: 55vw; min-width: 330px;" /> 这里使用vw表示宽度是相对于视口宽度的55%。 如今,所有主要的浏览器都支持此功能。 检查此链接。 回答4 不需要Javascript。 IE6 Internet Explorer 6 百分比仅适用于元素的宽度,但height
  • Django图像大小调整并在上传前进行转换(Django image resizing and convert before upload)
    问题 我在这个主题上进行了很多搜索,但找不到真正需要的东西。 我会解释我的问题: 在我的网站上,用户可以上传图像。 我需要调整此图片的大小并将其转换为JPEG,然后再上传。 我在Views.py中看到了使用方法的一些解决方案,但我想通过重写Models.py中的save()方法来实现。 问题是,我发现所有用于在save方法中调整图像大小的解决方案都是在第一次保存(称为超级功能)后才执行的,这意味着它不使用带宽(如果我使用CDN)(我对此是正确的)观点?)。 感谢您的帮助 回答1 首先,最好建立正确的语言。 Django和Python仅存在于服务器端。 因此,必须将它们操作,保存或以其他方式使用的所有内容首先发送到服务器。 如果要使用Django或Python管理照片,则用户必须首先将此照片上传到服务器。 上传照片后,Django可以自由地进行更改,然后再存储文件。 如果您关注的是上传带宽,并且不想上传大文件,则必须在客户端上调整照片的大小并重新设置其格式。 如果这是一个Web应用程序,则可以使用Javascript来完成,但是不能使用Python来完成,因为Python不会在像您这样的应用程序的客户端上运行。 如果您不关心带宽,那么您可以自由地让用户“上传”文件,但是在保存之前让Django调整大小并重新格式化。 您是正确的,您将要覆盖照片对象的保存功能。
  • 如何使用Javascript / jQuery确定是否已加载图像?(How can I determine if an image has loaded, using Javascript/jQuery?)
    问题 我正在编写一些Javascript来调整大图像的大小,以适合用户的浏览器窗口。 (不幸的是,我没有控制源图像的大小。) 因此,HTML中将包含以下内容: <img id="photo" src="a_really_big_file.jpg" alt="this is some alt text" title="this is some title text" /> 我是否可以确定是否已下载img标签中的src图像? 我需$(document).ready()是因为如果在浏览器加载图像之前执行$(document).ready()会遇到问题。 $("#photo").width()和$("#photo").height()将返回占位符的大小(替代文本)。 就我而言,这大约是134 x 20。 现在,我只是在检查照片的高度是否小于150,并假设是alt文字。 但这确实是一个技巧,如果照片的高度小于150像素(在我的特定情况下不太可能),或者替换文字的高度大于150像素(可能在小的浏览器窗口中发生),它就会中断。 编辑:对于任何想要查看代码的人: $(function() { var REAL_WIDTH = $("#photo").width(); var REAL_HEIGHT = $("#photo").height(); $(window).resize(adjust
  • CSS force image resize and keep aspect ratio(CSS force image resize and keep aspect ratio)
    问题 我正在处理图像,但遇到宽高比问题。 <img src="big_image.jpg" width="900" height="600" alt="" /> 如您所见,已经指定了height和width 。 我为图像添加了CSS规则: img { max-width:500px; } 但是对于big_image.jpg ,我收到width=500和height=600 。 如何设置图像以调整尺寸,同时保持其纵横比。 回答1 img { display: block; max-width:230px; max-height:95px; width: auto; height: auto; } <p>This image is originally 400x400 pixels, but should get resized by the CSS:</p> <img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png"> 如果对于指定区域太大,则会缩小图像(不利的一面是,不会放大图像)。 回答2 我一直在努力地解决这个问题,最终得出了一个简单的解决方案: object-fit: cover; width: 100%; height: 250px; 您可以调整宽度和高度以适合您的需求,object
  • 如何放大图像并使其居中?(How to zoom in an image and center it?)
    问题 任何想法如何使用javascript , css放大特定点上的图像? 我正在使用基于webkit的浏览器。 我可以通过指定zoom属性进行缩放,例如`elem.style.zoom =“ 150%”,主要问题是我无法将图像居中放置在要缩放的位置。 我可以使用mouseclick进行缩放。 回答1 正如我在上面的评论中所说,我会避免使用zoom css属性,而只使用javascript。 我设法整理了以下代码,这些代码对于第一次单击非常有效,实际上所需的只是动态一点(甚至一个词?)。 <html> <head> <script type="text/javascript"> function resizeImg (img) { var resize = 150; // resize amount in percentage var origH = 200; // original image height var origW = 200; // original image width var mouseX = event.x; var mouseY = event.y; var newH = origH * (resize / 100) + "px"; var newW = origW * (resize / 100) + "px"; // Set the new width
  • Android的WebView可以自动调整大图像的大小吗?(Can Android's WebView automatically resize huge images?)
    问题 在某些Web浏览器中,巨大的图像会自动调整大小以适合屏幕。 是否可以在Android WebView中执行相同的操作? 网页仅包含图像,也许添加一些JavaScript可以达到目的? 有人已经这样做了吗? 注意:我不知道图像的大小。 回答1 是的,有可能。 您可以尝试使用以下代码设置WebView布局。 它将所有图像(大于Device Screen Width )调整为屏幕宽度。 这适用于两个方向(纵向和横向) webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 您可以稍后添加额外的边距/填充以获取正确的间距。 回答2 webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 可行,但已弃用。 这是不使用LayoutAlgorithm.SINGLE_COLUMN的另一个解决方案,使用CSS: @SuppressLint("NewApi") private openWebView() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { webView.getSettings().setLayoutAlgorithm