天道酬勤,学无止境

使用Javascript获取画布中的最大字体大小(Use Javascript to get Maximum font size in canvas)

问题

我正在绘制需要在整个可用屏幕上(100%的宽度和高度)的画布。 我像这样使用javascript设置画布的宽度和高度

  var w = window.innerWidth;
  var h = window.innerHeight;
  var canvas = document.getElementById("myCanvas");
  canvas.width  = w;
  canvas.height = h;

设置画布后,我需要在其中绘制一些文本,以获取最大可用字体大小。 请帮助我找到如何显示最大字体大小的文本的方法。 文本可以包含单个字符(大写和小写)或字符串,也可以包含数字。 我需要用JavaScript而不是jquery来做。

感谢您的帮助。

回答1

挑战

由于canvas的measureText当前不支持测量高度(上升+下降),因此我们需要做一些DOM技巧来获取行高。

由于字体(或字体)的实际高度不一定(很少)与字体大小相对应,因此我们需要一种更准确的度量方式。

解决方案

小提琴演示

结果将是垂直对齐的文本,该文本始终适合画布的宽度。

折断

该解决方案将自动获得字体的最佳大小。

第一个功能是包装measureText以支持高度。 如果文本指标的新实现不可用,请使用DOM:

function textMetrics(ctx, txt) {

    var tm = ctx.measureText(txt),
        w = tm.width,
        h, el;  // height, div element
    
    if (typeof tm.fontBoundingBoxAscent === "undefined") {
    
        // create a div element and get height from that
        el = document.createElement('div');
        el.style.cssText = "position:fixed;font:" + ctx.font +
                           ";padding:0;margin:0;left:-9999px;top:-9999px";
        el.innerHTML = txt;

        document.body.appendChild(el); 
        h = parseInt(getComputedStyle(el).getPropertyValue('height'), 10);
        document.body.removeChild(el);

    } 
    else {
        // in the future ...
        h = tm.fontBoundingBoxAscent + tm.fontBoundingBoxDescent;
    }

    return [w, h];
}

现在我们可以循环找到最佳大小(此处不是非常优化,但可以达到目的-我刚才写了这个,所以里面可能有错误,一个就是如果文本只是一个不超过宽度的字符)高度之前)。

此函数至少需要两个参数,上下文和文本,其他是可选参数,例如字体名称(仅名称),公差[0.0、1.0](默认0.02或2%)和样式(即粗体,斜体等):

function getOptimalSize(ctx, txt, fontName, tolerance, tolerance, style) {

    tolerance = (tolerance === undefined) ? 0.02 : tolerance;
    fontName = (fontName === undefined) ? 'sans-serif' : fontName;
    style = (style === undefined) ? '' : style + ' ';
    
    var w = ctx.canvas.width,
        h = ctx.canvas.height,
        current = h,
        i = 0,
        max = 100,
        tm,
        wl = w - w * tolerance * 0.5,
        wu = w + w * tolerance * 0.5,
        hl = h - h * tolerance * 0.5,
        hu = h + h * tolerance * 0.5;
    
    for(; i < max; i++) {

        ctx.font = style + current + 'px ' + fontName;
        tm = textMetrics(ctx, txt);
        
        if ((tm[0] >= wl && tm[0] <= wu)) {
            return tm;
        }
        
        if (tm[1] > current) {
            current *= (1 - tolerance);
        } else {
            current *= (1 + tolerance);
        }            
    }
    return [-1, -1];
}
回答2

尝试这个。

现场演示

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2 - 10;
var text = 'I M @ CENTER!';
context.font = '10pt Calibri'; //try changing values 10,15,20
context.textAlign = 'center';
context.fillStyle = 'red';
context.fillText(text, x, y);

您可以根据窗口大小提供条件。创建一个简单的函数,如下所示:

function Manipulate_FONT(window.widht, window.height) {
    if (window.widht == something && window.height == something) {
        font_size = xyz //put this in ---> context.font = '10pt Calibri'
    }
}

受限制的 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>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 列出用户浏览器可以显示的每种字体(list every font a user's browser can display)
    问题 javascript中是否有一种方法可以获取浏览器可以显示的所有字体(或字体家族)的名称? (我想为用户提供一个包含所有可用字体的列表的下拉列表,并允许用户选择一种字体。)我不希望不必事先对该列表进行硬编码或从服务器发送下来。 (从直觉上讲,似乎浏览器应该知道它拥有什么字体,并且应该以某种方式将其公开给javascript。) 回答1 JavaScript版本有点片状。 它通过迭代已知的字体和测试来获取字体。 最准确的方法(尽管必须使用适当的插件)是使用Flash。 在这里,您可以获取字体列表,而不必使用尺寸分别测试字体。 您将不得不决定是否拥有确切的列表,但要以不能在某些设备(iDevices,不具有Flash插件的浏览器等)上运行为代价,或者仅通过JavaScript更好地支持部分列表。 回答2 就在这里! 我很高兴您提出这个问题,因为我现在也想使用这个问题。 http://www.lalit.org/lab/javascript-css-font-detect 来自http://www.lalit.org/wordpress/wp-content/uploads/2008/05/fontdetect.js?ver=0.3的代码 /** * JavaScript code to detect available availability of a * particular
  • 在Textarea中光标位置处显示DIV [重复](Display DIV at Cursor Position in Textarea [duplicate])
    问题 这个问题已经在这里有了答案: 如何在文本框中获取插入符号的(x,y)像素坐标? (3个答案) 7年前关闭。 对于我的一个项目,我很乐意为特定的textarea提供自动完成功能。 类似于智能感知/全残式的工作原理。 但是为此,我必须找出绝对光标位置,以便知道DIV应该出现的位置。 事实证明:(几乎希望如此)这是不可能实现的。 有谁有一些巧妙的想法如何解决这个问题? 回答1 我的Hacky实验版本2 此新版本适用于可以根据需要进行调整的任何字体以及任何textarea大小。 在注意到某些人仍在尝试使此方法起作用之后,我决定尝试一种新方法。 这次我的结果更好-至少在Linux上的Google chrome上。 我不再有Windows PC可用,因此我只能在Ubuntu上的chrome / firefox上进行测试。 我的结果在Chrome上可以始终保持100%的效果,而在Firefox上可以达到70-80%左右,但是我不认为很难找到不一致之处。 此新版本依赖于Canvas对象。 在我的示例中,我实际上展示了非常画布-就像您可以在实际中看到它一样,但是可以使用隐藏的画布对象很容易地完成它。 当然,这肯定是一种hack,对于那些我认为相当混乱的代码,我会提前表示歉意。 至少在Google chrome中,无论我设置为哪种字体或textarea的大小,它都能始终如一地工作。 我使用了萨姆
  • 最大尺寸元素(Maximum size of a <canvas> element)
    问题 我正在使用一个高度为600至1000像素,宽度为数万或数十万像素的canvas元素。 但是,经过一定数量的像素(显然是未知的)之后,画布不再显示我使用JS绘制的形状。 有谁知道是否有限制? 在Chrome 12和Firefox 4中都进行了测试。 回答1 2014年10月13日更新 所有经过测试的浏览器都限制了canvas元素的高度/宽度,但是许多浏览器也限制了canvas元素的总面积。 对于我可以测试的浏览器,限制如下: 铬合金: 最大高度/宽度:32,767像素最大面积:268,435,456像素(例如16,384 x 16,384) Firefox: 最大高度/宽度:32,767像素最大面积:472,907,7​​76像素(例如22,528 x 20,992) IE: 最大高度/宽度:8,192像素最大面积:不适用 IE手机: 最大高度/宽度:4,096像素最大面积:不适用 其他: 我目前无法测试其他浏览器。 有关其他限制,请参阅此页面上的其他答案。 在大多数浏览器中,超过最大长度/宽度/面积会使画布无法使用。 (即使在可用区域中,它也会忽略任何绘制命令。)IE和IE Mobile将遵守可用空间中的所有绘制命令。 回答2 2018年更新: 随着时间的流逝,画布的局限性发生了变化。 可悲的是,没有改变的是,浏览器仍然无法通过Canvas API提供有关画布大小限制的信息。
  • Google Maps API v3:InfoWindow大小不正确(Google Maps API v3: InfoWindow not sizing correctly)
    问题 当您单击我的Google Maps v3上的主页图标时,我的InfoWindow似乎没有正确调整到InfoWindow内容的大小。 它在不应该时提供滚动条。 InfoWindow应该正确地自动调整大小。 有什么想法吗? 根据请求,相关的JavaScript会为InfoWindow注入HTML: listing = '<div>Content goes here</div>'; 更新 此错误已由有问题的Google处理 https://issuetracker.google.com/issues/35823659 该修复程序于2015年2月在Maps JavaScript API的3.19版中实现。 回答1 在您的信息窗口中添加一个div <div id=\"mydiv\">YourContent</div> 然后使用css设置大小。 为我工作。 假设所有信息窗口大小相同! #mydiv{ width:500px; height:100px; } 回答2 简短的答案:在构造函数中设置maxWidth options属性。 是的,即使设置最大宽度不是您想要的。 更长的故事:将v2映射迁移到v3,我确切地看到了所描述的问题。 窗口的宽度和高度各不相同,有些具有垂直滚动条,有些则没有。 有些已嵌入<br />数据中,但至少有一个大小合适。 我不认为InfoWindowsOptions
  • HTML5 & CSS3 初学者指南(4) – Canvas使用
    介绍传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件。在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力。HTML5的到来,带来了新的成员<canvas>标签。 什么是 Canvas?HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素向 HTML5 页面添加 Canvas 元素。规定元素的 id、宽度和高度:<canvas id="myCanvas" width="200" height="100"></canvas> 通过 JavaScript 来绘制Canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);</script>首先,JavaScript 使用 id 来寻找 Canvas 元素:var c=document
  • Canvas 2D详解
    大家好,我是石璞东。 在我书的第六章中有一个关于MNIST手写数字的例子,当数据集加载完成之后,用户可以在<canvas/>上输入手写数字,点击「预测」按钮之后,浏览器会弹出经模型预测之后的结果;在我书的第九章和第十章中,分别有关于目标检测和人体姿态检测的案例,当关键点的得分符合一定要求时,会通过<canvas/>将关键部分绘制出来,请看效果: 图1 - MNIST手写数字案例 图2 - 人体姿态检测案例 图3 - 目标检测案例 接下来,我们将在本文中详细讲解一下上述三个模块均用到的一个技术<canvas/>。 参考资料 MDN Web Docs:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API《JavaScript高级程序设计(第三版)》《HTML5权威指南》 1.canvas概述 HTML5最受欢迎的功能就是<canvas>元素,Canvas API提供了一个通过JavaScript和HTML的<canvas>元素来绘制图形的方式,可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面,该API主要聚焦于2D图形,我们也可以使用WebGL API绘制硬件加速的2D和3D图形。 2.基本用法 使用<canvas>大概可以分为两个步骤: 在HTML中定义<canvas>标签;获取<canvas
  • 如何在浏览器中通过Javascript压缩图像?(How to compress an image via Javascript in the browser?)
    问题 TL; DR; 上传之前,有没有一种方法可以直接在浏览器端压缩图像(主要是jpeg,png和gif)? 我很确定JavaScript可以做到这一点,但是我找不到实现它的方法。 这是我要实现的完整方案: 用户访问我的网站,并通过input type="file"元素选择图片, 该图片是通过JavaScript检索的,我们进行了一些验证,例如正确的文件格式,最大文件大小等, 如果一切正常,则会在页面上显示图像的预览, 用户可以执行一些基本操作,例如将图像旋转90°/ -90°,按照预定义的比例进行裁剪等,或者用户可以上传其他图像并返回到第1步当用户满意时,然后将编辑后的图像压缩并本地“保存”(不保存到文件中,而是保存在浏览器的内存/页面中),- 用户使用姓名,年龄等数据填写表单, 用户单击“完成”按钮,然后将包含数据和压缩图像的表单发送到服务器(不使用AJAX), 直到最后一步的整个过程都应该在客户端完成,并且应该与最新的Chrome和Firefox,Safari 5+和IE 8+兼容。 如果可能的话,应该只使用JavaScript(但我很确定这是不可能的)。 我现在还没有编写任何代码,但是我已经考虑过了。 可以通过File API在本地读取文件,可以使用Canvas元素完成图像预览和编辑,但是我找不到找到图像压缩部分的方法。 根据html5please.com和caniuse
  • 将输入字段的宽度调整为其输入(Adjust width of input field to its input)
    问题 <html> <head> </head> <body> <input type="text" value="1" style="min-width:1px;" /> </body> </html> 这是我的代码,无法正常工作。 HTML,JavaScript,PHP或CSS是否有其他方法来设置最小宽度? 我希望文本输入字段的宽度可以动态变化,以便输入字段可以围绕其内容流动。 每个输入都有一个2em的内置填充,这就是问题,第二个问题是min-width根本无法在输入上使用。 如果我设置的宽度超过了整个程序的混乱程度,那么我需要的宽度是1px,仅在需要时才需要。 回答1 听起来您的期望是,根据文本框的内容将样式动态地应用于文本框的宽度。 如果是这样,您将需要一些js在更改文本框内容的情况下运行,如下所示: <input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"> 注意:仅当每个字符的宽度恰好为8px时,此解决方案才有效。 您可以使用CSS单位“ ch”(字符),该字符代表所选字体中字符“ 0”的宽度。 你可以在这里读到它。 回答2 在现代浏览器版本中,CSS单元ch也可用。 据我了解,它是与字体无关的单位,其中1ch等于任何给定字体中字符0
  • 如何找到HTML画布上文本的高度?(How can you find the height of text on an HTML canvas?)
    问题 规范中有一个context.measureText(text)函数,该函数将告诉您打印该文本需要多少宽度,但是我找不到找到高度的方法。 我知道它是基于字体的,但是我不知道将字体字符串转换为文本高度。 回答1 更新-作为此工作的示例,我在Carota编辑器中使用了此技术。 继ellisbben的回答之后,这是一个增强版本,可从基线获得上升和下降,即与Win32的GetTextMetric API返回的tmAscent和tmDescent相同。 如果您想用不同字体/大小的跨度进行文字包装的文本,则需要这样做。 上面的图像是在Safari中的画布上生成的,红色是指示画布绘制文本的最上面一行,绿色是基线,蓝色是底部(所以红色到蓝色是完整高度)。 使用jQuery简洁: var getTextHeight = function(font) { var text = $('<span>Hg</span>').css({ fontFamily: font }); var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>'); var div = $('<div></div>'); div.append(text, block); var body = $('body'); body
  • CSS3不透明度渐变?(CSS3 opacity gradient?)
    问题 我正在尝试创建这样的效果,但是我的网站具有动态的background-color 。 请注意,此示例使用白色叠加层,该叠加层无法在不同背景下使用。 p { width: 300px; overflow: hidden; height: 50px; line-height: 50px; position: relative; } p:after { content: ""; width: 100px; height: 50px; position: absolute; top: 0; right: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1)); } 我希望做的是设置CSS不透明度渐变。 这种工作,但是代码太乱了。 看第二个例子,我可以在jQuery中实现它,但是有什么方法可以完全在CSS中做到这一点? 回答1 您可以在CSS中完成此操作,但当前除了现代版本的Chrome,Safari和Opera外,浏览器中没有太多支持。 Firefox当前仅支持SVG掩码。 有关更多信息,请参见Caniuse结果。 CSS: p { color: red; -webkit-mask-image: -webkit-gradient(linear, left top, left
  • 使用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进行插值,因此,通过逐步执行此操作,可以在使用双线性插值时接近双三次结果
  • 画布中鼠标的实际位置[重复](Real mouse position in canvas [duplicate])
    问题 这个问题已经在这里有了答案: 如何获得在画布元素上单击鼠标的坐标? (22个答案) 1年前关闭。 我正在尝试用鼠标在HTML5画布上绘制,但是似乎正常工作的唯一方法是,如果出于某种原因,如果我更改了画布的位置,那么画布是否位于0,0(左上角)的位置它不会像应该的那样绘制。 这是我的代码。 function createImageOnCanvas(imageId){ document.getElementById("imgCanvas").style.display = "block"; document.getElementById("images").style.overflowY= "hidden"; var canvas = document.getElementById("imgCanvas"); var context = canvas.getContext("2d"); var img = new Image(300,300); img.src = document.getElementById(imageId).src; context.drawImage(img, (0),(0)); } function draw(e){ var canvas = document.getElementById("imgCanvas"); var context =
  • Android FontMetrics中最高,上升,基线,下降,最低和领先的含义(Meaning of top, ascent, baseline, descent, bottom, and leading in Android's FontMetrics)
    问题 这似乎是一个基本问题,但我在SO上找不到类似的问题。 在阅读文档时,我很难理解这些概念。 我想了解有什么区别之间的top和ascent ,也bottom和descent 。 基线到底在哪里? 您有图表可以帮助我对其进行可视化吗? 回答1 首先,让我们回顾一下文档中所说的内容: 顶部-在给定的文本大小下,字体中最高字形在基线上方的最大距离。 上升-单行间距文本在基线上方的建议距离。 下降-单行间距文本在基线以下的推荐距离。 底部-在给定的文本大小下,字体下最低字形的基线以下最大距离。 前导-建议在文本行之间添加额外的空格。 请注意,基准是前四个指标的测量基准。 它是构成基本的文本坐在线,即使有些字符(比如,收率,J等)可能有走线以下的部分。 它可与您在带衬线的笔记本中写的行相媲美。 这是一张有助于可视化这些事情的图片: 请记住,在Java和Android的画布上绘制时,下降是y的增加,上升是y的减少。 这意味着,FontMetrics对象top和ascent ,因为它们是从基线测量的是负数(而下降和底部为正数)。 因此,为了从距离top至bottom ,你需要做的( bottom - top )。 前导是一行的底部与下一行的顶部之间的距离。 在上面的图片中,它是第1行的橙色与第2行的紫色之间的空间。如下面的@MajorTom所述,在印刷术中,该术语更恰当地定义为
  • 如何修复HTML5画布中的模糊文本?(How do I fix blurry text in my HTML5 canvas?)
    问题 我总的n00b HTML5和我有工作canvas渲染形状,颜色和文字。 在我的应用程序中,我有一个视图适配器,可以动态创建画布,并用内容填充它。 效果非常好,除了我的文本非常模糊/模糊/拉伸。 我还看到了许多其他文章,说明为什么在CSS定义宽度和高度会导致此问题,但我在javascript都定义了这些内容。 相关代码(查看小提琴): var width = 500;//FIXME:size.w; var height = 500;//FIXME:size.h; var canvas = document.createElement("canvas"); //canvas.className="singleUserCanvas"; canvas.width=width; canvas.height=height; canvas.border = "3px solid #999999"; canvas.bgcolor = "#999999"; canvas.margin = "(0, 2%, 0, 2%)"; var context = canvas.getContext("2d"); ////////////////// //// SHAPES //// ////////////////// var left = 0; //draw zone 1 rect context
  • 使用CSS时,画布会拉伸,但是具有“ width” /“ height”属性的画布是正常的(Canvas is stretched when using CSS but normal with “width” / “height” properties)
    问题 我有2个画布,一个使用HTML属性width和height来设置它的大小,另一个使用CSS: <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> <canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas> Compteur1会像应该显示的那样显示,但不会像compteur2那样显示。 内容是使用JavaScript在300x300画布上绘制的。 为什么会有显示差异? 回答1 似乎width和height属性决定了画布坐标系的宽度或高度,而CSS属性只是决定了将在其中显示框的大小。 在http://www.whatwg.org/html#attr-canvas-width(需要JS)或http://www.whatwg.org/c#attr-canvas-width(可能会占用您的计算机)中对此进行了说明。 : canvas元素具有两个属性来控制元素位图的大小: width和height 。 指定这些属性时,它们的值必须是有效的非负整数。 必须使用解析非负整数的规则来获取其数值。
  • CSS中的自适应字体大小(Responsive font size in CSS)
    问题 我已经使用Zurb Foundation 3网格创建了一个站点。 每个页面都有一个很大的h1 : body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; } <div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div> <!-- End Tagline --> </div> <!-- End Row --> 当我将浏览器调整为移动大小时,大字体不会调整,并导致浏览器包含水平滚动条以适应大文本。 我注意到在Zurb Foundation 3 Typography示例页面上,标题在压缩和扩展时适应浏览器。 我是否真的缺少明显的东西? 我该如何实现? 回答1 调整浏览器窗口大小时, font-size不会像这样响应。 相反,它们会响应浏览器的缩放/类型大小设置,例如,当您在浏览器中同时按下键盘上的Ctrl和+时。 媒体查询 您将不得不考虑使用媒体查询来以一定的间隔减小字体大小,从而开始破坏设计并创建滚动条。 例如,尝试将其添加到底部的CSS内,在设计开始中断的任何地方更改320像素的宽度: @media only screen and (max
  • 如何获得在画布元素上单击鼠标的坐标?(How do I get the coordinates of a mouse click on a canvas element?)
    问题 将click事件处理程序添加到canvas元素(将返回click的x和y坐标(相对于canvas元素))的最简单方法是什么? 不需要旧版浏览器兼容性,Safari,Opera和Firefox都可以。 回答1 编辑2018:这个答案很老了,它使用检查不再需要的旧浏览器,因为clientX和clientY属性在所有当前浏览器中都有效。 您可能想查看Patriques Answer,以获得更简单,最新的解决方案。 原始答案: 正如我当时发现的一篇文章中所述,但不再存在: var x; var y; if (e.pageX || e.pageY) { x = e.pageX; y = e.pageY; } else { x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } x -= gCanvasElement.offsetLeft; y -= gCanvasElement.offsetTop; 对我来说工作得很好。 回答2 如果您喜欢简单性,但仍然想要跨浏览器功能,那么我发现此解决方案最适合我。 这是
  • 调整HTML5画布中图像的大小(Resizing an image in an HTML5 canvas)
    问题 我正在尝试使用javascript和canvas元素在客户端创建缩略图,但是当我缩小图像时,它看起来很糟糕。 看起来好像是在Photoshop中缩小了尺寸,将重采样设置为“最近的邻居”而不是Bicubic。 我知道有可能使它看起来正确,因为该站点也可以使用画布来很好地完成它。 我已经尝试使用与[[Source]]链接中所示相同的代码,但是看起来仍然很糟糕。 有什么我想念的东西,需要设定的东西或其他东西吗? 编辑: 我正在尝试调整jpg的大小。 我尝试在链接的网站和photoshop中调整相同jpg的大小,缩小尺寸时看起来还不错。 以下是相关代码: reader.onloadend = function(e) { var img = new Image(); var ctx = canvas.getContext("2d"); var canvasCopy = document.createElement("canvas"); var copyContext = canvasCopy.getContext("2d"); img.onload = function() { var ratio = 1; if(img.width > maxWidth) ratio = maxWidth / img.width; else if(img.height > maxHeight)
  • 调整字体大小以适合div(一行)(resize font to fit in a div (on one line))
    问题 有人问过类似的问题,但是解决方案确实与我正在尝试做的事情吻合。 基本上,我有一篇标题为( <h1> )的文章。 我不想控制标题的长度,但是我也不想标题显示在多行上。 CSS或jQuery是否可以根据<div>标签的宽度来调整文本大小? 我知道如果可以检测到<div>边缘的文本重叠,我将如何处理伪代码: var fontize = $("#title").css("font-size"); var i = /*remove unit from integer*/ while( /*text overlaps div*/ ){ $("#title").css("font-size", --i+"pt"); } 如果有一个CSS属性,我可以设置为更好,但是我似乎找不到一个(在这种情况下,溢出将不起作用)。 回答1 CSS否,JavaScript是 您无法使用CSS来做到这一点,但是您可以在javascript / jQuery中做到这一点。 为了帮助您使用伪代码,因为您已经知道该怎么做。 只是您不知道如何检测多余的宽度。 最好的方法是使DIV具有以下(至少)样式: position: absolute; visibility: hidden; white-space: nowrap; font-family: /* same as your title's */
  • 如何计算DOM元素内的文本行? 我可以吗?(How can I count text lines inside an DOM element? Can I?)
    问题 我想知道是否有一种方法可以计算div中的行数。 假设我们有一个像这样的div: <div id="content">hello how are you?</div> 取决于许多因素,div可以包含一行,两行或什至四行文本。 脚本有什么办法知道吗? 换句话说,自动中断完全可以在DOM中表示吗? 回答1 如果div的大小取决于内容(我假设您的描述是这种情况),则可以使用以下方法检索div的高度: var divHeight = document.getElementById('content').offsetHeight; 并除以字体行高: document.getElementById('content').style.lineHeight; 或者,如果尚未显式设置行高,请执行以下操作: var element = document.getElementById('content'); document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight"); 您还需要考虑填充和行间距。 编辑 完全独立的测试,显式设置行高: function countLines() { var el = document.getElementById('content'); var