天道酬勤,学无止境

从文本html画布中提取路径(extract path from text html canvas)

问题

无论如何,是否有从html 5的文本字母中提取路径,然后沿该路径抓取(x,y)坐标,以便该字母可以由沿该字母路径的圆圈组成?

我想采用x,y坐标,并在其位置应用形状,以使其类似于“像素化”格式的文本字符串,并带有一些动画效果。

关于在画布上沿字符路径获取某种x,y坐标的任何建议都是很好的。

编辑:我本质上是试图自动生成坐标以执行类似于此的操作:http://www.html5canvastutorials.com/labs/html5-canvas-google-bouncing-balls/

回答1

像素缩放

一种简单的方法是执行以下操作:

  • 使用小字体,使用纯色绘制文本
  • 迭代所有像素。 任何alpha = 255的像素,存储到数组中,但x和y随直径缩放

现在,您有了代表文本的粗略的“球”阵列,并且可以进行动画处理。 在字母间距方面,它不是超级准确,但应该针对给定的目的进行操作(您始终可以测量每个字母,并在分隔点处使用额外的增量值来增加x的末尾值)。

较大的字体可以提高质量,但也会产生更多的磅数。 与下面的演示中使用的通用字体不同的字体类型也可能有益于整体外观(实验!)。 您还可以调整Alpha阈值,以包括不完全固定但有影响力的像素。

最后,不同的浏览器以不同的方式呈现文本,因此您可能也需要牢记这一点(请参阅上文中有关测量每个字母以在它们之间添加额外空间的内容)。

演示版

快照

 var ctx = document.querySelector("canvas").getContext("2d"), inp = document.querySelector("input"), w = ctx.canvas.width, h = ctx.canvas.height, balls = []; // global ball array ctx.fillStyle = "rgb(0, 154, 253)"; // fill must be a solid color generate(inp.value) // init default text inp.onkeyup = function() {generate(this.value)}; // get some text to demo function generate(txt) { var i, radius = 5, // ball radius data32; // we'll use uint32 for speed balls = []; // clear ball array ctx.clearRect(0, 0, w, h); // clear canvas so we can ctx.fillText(txt.toUpperCase(), 0, 10); // draw the text (default 10px) // get a Uint32 representation of the bitmap: data32 = new Uint32Array(ctx.getImageData(0, 0, w, h).data.buffer); // loop through each pixel. We will only store the ones with alpha = 255 for(i = 0; i < data32.length; i++) { if (data32[i] & 0xff000000) { // check alpha mask balls.push({ // add new ball if a solid pixel x: (i % w) * radius * 2 + radius, // use position and radius to y: ((i / w)|0) * radius * 2 + radius, // pre-calc final position and size radius: radius, a: (Math.random() * 250)|0 // just to demo animation capability }); } } // return array - here we'll animate it directly to show the resulting objects: } (function animate() { ctx.clearRect(0, 0, w, h); ctx.beginPath(); for(var i = 0, ball; ball = balls[i]; i++) { var dx = Math.sin(ball.a * 0.2) + ball.radius, // do something funky dy = Math.cos(ball.a++ * 0.2) + ball.radius; ctx.moveTo(ball.x + ball.radius + dx, ball.y + dy); ctx.arc(ball.x + dx, ball.y + dy, ball.radius, 0, 6.28); ctx.closePath(); } ctx.fill(); requestAnimationFrame(animate); })();
 body {font:bold 16px sans-serif}
 <label>Type some text: <input value="PIXELS"></label><br> <canvas width=1024></canvas>
回答2

通过沿字母路径直观地放置圆圈,这是手动完成的艰巨任务。

没有人工干预,自动(自动)变得更加困难

这是自动排列圆圈以形成字母的方法。

答案分为两部分...

  1. 找到“字母形式”,

  2. 创建圆圈以填充并勾勒出字母的轮廓。

1.困难的部分

弗雷德里克·德Bleser已编码的一个很好的库调用opentype.js使用画布上二次曲线,需要一个.TTF字体文件,并解析出任何指定字符的字形轮廓:https://github.com/nodebox/opentype.js

2.唯一少一点的困难部分

对于每个字母:

  • 在每个二次曲线上找到“许多”点。 这是一种算法,用于以间隔T计算曲线上的[x,y]。T的范围从曲线起点的0.00到曲线终点的1.00。 T不会沿着曲线产生均匀间隔的[x,y],因此您将需要过采样(因此“许多”可能意味着1000的T值介于0.00和1.00之间)。

     function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) { var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; return( {x:x,y:y} ); }
  • 找到与这些点的曲线角度相切的角度。 (基本计算出与曲线成直角的角度)。 您可以使用二次公式的下一个导数来做到这一点:

     function quadraticBezierTangentAngle(t, p0, p2, p1) { var tt = 1 - t; var dx = (tt * p1.x + t * p2.x) - (tt * p0.x + t * p1.x); var dy = (tt * p1.y + t * p2.y) - (tt * p0.y + t * p1.y); return Math.tan(Math.atan2(dy,dx)); }
  • 从曲线的起点开始,计算从当前[x,y]到下一个[x,y]的每个距离。 您可以使用勾股定理来做到这一点:

     var dx=nextX-currentX; var dy=nextY-currentY; var distance=Math.sqrt(dx*dx+dy*dy);
  • 对数组进行重复数据删除,以使所有剩余的[x,y]元素与先前的[x,y]元素相距1px。 您可以通过使用第一个数组中的值填充第二个数组来实现此目的,其中parseInt( nextInOriginalArray - lastDistanceInNewArray)==1;

  • 确定将组成每个字母的圆圈的半径。 实际上,这比看起来要难。 对于“块状”字体,可以在画布上绘制字母“ I”。 然后使用getImageData获取所有像素。 通过搜索字母垂直中间水平分布的不透明像素的数量,计算“ I”垂直笔划的宽度。 对于块状字体, var radius = horizontalOpaquePixelCount/2; 。 对于具有可变宽度笔触的字体,您必须具有创造力。 也许var radius = horizontalOpaquePixelCount/3;var radius = horizontalOpaquePixelCount/4;

  • 遍历点数组并定义每个radius*2像素的新圆。 您可以使用正切角和三角函数来计算每个圆的中心点,如下所示:

     var centerX = curvePointX + radius*Math.cos(tangentAngle); var centerY = curvePointY + radius*Math.sin(tangentAngle);
  • 创建圆时,字母的曲线有时会自动转回自己,因此您必须检查创建的每个新圆,以确保它不会与现有圆重叠。 您可以像这样计算一个新圆是否会与每个现有圆相交:

     var dx = newCircleCenterX - existingCircleCenterX; var dy = newCircleCenterY - existingCircleCenterY; var distance=Math.sqrt(dx*dx+dy*dy); var circlesAreIntersecting=(distance<=newCircleRadius+existingCircleRadius);

微调:在字母路径中的某些端点附近,您会发现下一个完整半径的圆将从字母形状中溢出。 如果发生这种情况,您可以缩小某些圆的半径以适合字母形状。 如果您只想为圆指定固定半径,则可以根据所有圆的平均半径重新计算所有圆的固定半径,包括必须“缩小”以适合字母形状的圆。

例如。 这是由15个圆圈组成的字母“ L”。

在此处输入图片说明

但是,两个红色圆圈不符合其字母格式。 您可以(1)缩小红色圆圈以适合字母形状,或者(2)根据适合字母形状的平均半径重新计算新的固定圆半径:

var total=0;
total += greenRadii * 13;
total += verticalRedRadiusResizedToFitInsideLetterform;
total += horizontalRedRadiusResizedToFitInsideLetterform;
var newRadius = total / 15;

您可以通过计算2条线的交点来计算适合字母的红色半径的长度:(1)通过连接最后一个绿色圆圈中心和红色圆圈中心形成的线段,(2)从曲线上的最后一点。 这是一种计算2条线的交点的算法:

// Get interseting point of 2 line segments (if any)
// Attribution: http://paulbourke.net/geometry/pointlineplane/
function line2lineIntersection(p0,p1,p2,p3) {

    var unknownA = (p3.x-p2.x) * (p0.y-p2.y) - (p3.y-p2.y) * (p0.x-p2.x);
    var unknownB = (p1.x-p0.x) * (p0.y-p2.y) - (p1.y-p0.y) * (p0.x-p2.x);
    var denominator  = (p3.y-p2.y) * (p1.x-p0.x) - (p3.x-p2.x) * (p1.y-p0.y);        

    // Test if Coincident
    // If the denominator and numerator for the ua and ub are 0
    //    then the two lines are coincident.    
    if(unknownA==0 && unknownB==0 && denominator==0){return(null);}

    // Test if Parallel 
    // If the denominator for the equations for ua and ub is 0
    //     then the two lines are parallel. 
    if (denominator == 0) return null;

    // If the intersection of line segments is required 
    // then it is only necessary to test if ua and ub lie between 0 and 1.
    // Whichever one lies within that range then the corresponding
    // line segment contains the intersection point. 
    // If both lie within the range of 0 to 1 then 
    // the intersection point is within both line segments. 
    unknownA /= denominator;
    unknownB /= denominator;

    var isIntersecting=(unknownA>=0 && unknownA<=1 && unknownB>=0 && unknownB<=1)

    if(!isIntersecting){return(null);}

    return({
        x: p0.x + unknownA * (p1.x-p0.x),
        y: p0.y + unknownA * (p1.y-p0.y)
    });
}
标签

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

相关推荐
  • H5 - Canvas 技术详解
    文章目录 1. 介绍2. 基本用法2.1 替代内容(不支持时显示)2.2 获取 2D 渲染上下文:getContext()2.3 代码模板 3. 绘制形状3.1 画布栅格 及 坐标空间3.2 唯一可以原生绘制的图形:矩形3.3 绘制路径3.4 各种 子路径类型 的绘制方法3.4.1 使用 二次贝塞尔曲线,画对话气泡:quadraticCurveTo()3.4.2 使用 三次贝塞尔曲线,画心形:bezierCurveTo()3.4.3 子路径 综合使用,画 经典游戏吃豆人 的静态界面 3.5 缓存路径:Path2D 对象3.5.1 Path2D 对象的使用示例3.5.2 使用 SVG paths 作为 Path2D对象 的参数,进行路径缓存 4. 添加颜色 和 样式4.1 色彩属性4.1.1 画出渐变色板:fillStyle 属性4.1.2 画出渐变圆形组:strokeStyle 属性 4.2 透明度:globalAlpha 属性4.3 线型属性(线宽,末端样式,节点样式,虚线设置)4.4 渐变:canvasGradient 对象4.4.1 线性渐变 示例:createLinearGradient()4.4.1 径向渐变 示例:createRadialGradient() 4.5 背景图案:createPattern()4.6 阴影属性 5. 绘制文本5.1 基本使用5.2 文本样式
  • 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
  • SVG和HTML5 Canvas有什么区别?(What is the difference between SVG and HTML5 Canvas?)
    问题 SVG和HTML5 Canvas有什么区别? 他们似乎都对我做同样的事情。 基本上,它们都使用坐标点绘制矢量插图。 我想念什么? SVG和HTML5 Canvas之间的主要区别是什么? 为什么我要选择一个? 回答1 参见Wikipedia:http://en.wikipedia.org/wiki/Canvas_element SVG是用于在浏览器中绘制形状的较早标准。 但是,SVG从根本上来说是较高的级别,因为每个绘制的形状都被记住为场景图或DOM中的对象,随后将其渲染为位图。 这意味着,如果更改了SVG对象的属性,则浏览器可以自动重新渲染场景。 在上面的示例中,一旦绘制了矩形,系统就会忘记绘制矩形的事实。 如果要更改其位置,则需要重新绘制整个场景,包括可能已被矩形覆盖的所有对象。 但是在等效的SVG情况下,只需更改矩形的位置属性,浏览器就会确定如何重绘矩形。 也可以在图层中绘制画布,然后重新创建特定的图层。 SVG图像以XML表示,可以使用XML编辑工具创建和维护复杂的场景。 SVG场景图使事件处理程序可以与对象相关联,因此矩形可以响应onClick事件。 为了获得与画布相同的功能,必须手动将鼠标单击的坐标与绘制的矩形的坐标相匹配,以确定是否单击了该矩形。 从概念上讲,canvas是可以在其上构建SVG的较低级别协议。[需要引用]但是,(通常)情况并非如此-它们是独立的标准
  • 在HTML5画布上绘制旋转文本(Drawing rotated text on a HTML5 canvas)
    问题 我正在开发的Web应用程序的一部分要求我创建条形图以显示各种信息。 我认为,如果用户的浏览器具有功能,则可以使用HTML5 canvas元素绘制它们。 我没有为我的图形绘制线条和条形的问题,但是当涉及到标注轴,条形或线的标签时,我遇到了麻烦。 如何将旋转的文本绘制到画布元素上,使其与要标记的项目对齐? 几个示例包括: 逆时针旋转文本90度以标记y轴逆时针旋转文本90度以在垂直条形图上标记条形图任意旋转文本以标记折线图上的线 任何指针将不胜感激。 回答1 就像其他人提到的那样,您可能想看看重用现有的图形解决方案,但是旋转文本并不是太困难。 (对我而言)有些令人困惑的一点是,您旋转了整个上下文然后在其上进行绘制: ctx.rotate(Math.PI*2/(i*6)); 角度以弧度为单位。 该代码取自该示例,我相信该示例是为MDC画布教程的转换部分制作的。 请参阅下面的答案以获取更完整的解决方案。 回答2 发布此信息是为了帮助有类似问题的其他人。 我通过五步方法解决了这个问题-保存上下文,转换上下文,旋转上下文,绘制文本,然后将上下文还原为其保存状态。 我认为平移和转换为上下文是操纵覆盖在画布上的坐标网格。 默认情况下,原点(0,0)从画布的左上角开始。 X从左到右增加,Y从上到下增加。 如果您用左手的食指和拇指做一个“ L”,并在您的拇指向下的情况下将其按住在您的面前
  • 是否检测HTML画布中某些点的鼠标悬停?(Detect mouseover of certain points within an HTML canvas?)
    问题 我已经为Canvas构建了一个分析数据可视化引擎,并被要求在数据元素上添加类似于工具提示的悬停,以在光标下方显示该数据点的详细指标。 对于具有简单正方形区域或特定兴趣点的简单条形图和盖恩特图,树形图和节点图,我可以通过将绝对定位的DIV与:hover属性叠加来实现此目的,但是还有一些更复杂的可视化效果,例如饼图还有一个交通流渲染图,该渲染图具有由bezeir曲线定义的数百个独立区域。 当用户将鼠标悬停在特定的闭合路径上时,是否可以以某种方式附加覆盖或触发事件? 需要为其指定悬停的每个区域定义如下: context.beginPath(); context.moveTo(segmentRight, prevTop); context.bezierCurveTo(segmentRight, prevTop, segmentLeft, thisTop, segmentLeft, thisTop); context.lineTo(segmentLeft, thisBottom); context.bezierCurveTo(segmentLeft, thisBottom, segmentRight, prevBottom, segmentRight, prevBottom); /* * ...define additional segments... */ // <dream>
  • 如何在HTML5 canvas元素上编写文本?(How can I write text on a HTML5 canvas element?)
    问题 是否可以在HTML5 canvas上编写文本? 回答1 var canvas = document.getElementById("my-canvas"); var context = canvas.getContext("2d"); context.fillStyle = "blue"; context.font = "bold 16px Arial"; context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8); #my-canvas { background: #FF0; } <canvas id="my-canvas" width="200" height="120"></canvas> 回答2 在画布上绘制文本 标记: <canvas id="myCanvas" width="300" height="150"></canvas> 脚本(有几个不同的选项): <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.font = 'italic 18px Arial'; ctx.textAlign = 'center'; ctx
  • 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
  • 如何从PDF文件中提取文本?(How to extract text from a PDF file?)
    问题 我正在尝试使用Python提取此PDF文件中包含的文本。 我正在使用PyPDF2模块,并具有以下脚本: import PyPDF2 pdf_file = open('sample.pdf') read_pdf = PyPDF2.PdfFileReader(pdf_file) number_of_pages = read_pdf.getNumPages() page = read_pdf.getPage(0) page_content = page.extractText() print page_content 运行代码时,得到以下输出,该输出与PDF文档中包含的输出不同: !"#$%#$%&%$&'()*%+,-%./01'*23%4 5'%1$#26%3/%7/))/8%&)/26%8#3"%3"*%313/9#&) % 如何提取PDF文档中的原样? 回答1 我一直在寻找适用于python 3.x和Windows的简单解决方案。 不幸的是,textract似乎没有提供支持,但是,如果您正在寻找针对Windows / python 3的简单解决方案,请检出tika软件包,真的可以直接阅读pdf。 Tika-Python是与Apache Tika™REST服务绑定的Python,允许在Python社区中本地调用Tika。 from tika import parser #
  • 有没有办法使用CSS3 / Canvas来弯曲/弧形文本(Is there a way to curve / arc text using CSS3 / Canvas)
    问题 我正在尝试使用CSS3,HTML Canvas甚至是SVG来制作弯曲的文本效果(例如,请参见下图)? 这可能吗? 如果是这样,我怎么能达到这种效果? 更新:澄清:以这种方式设置样式的文本将是动态的。 回答1 SVG直接支持路径上的文本,尽管它不会沿路径“弯曲”单个字形。 这是如何创建它的示例: ... <defs> <path id="textPath" d="M10 50 C10 0 90 0 90 50"/> </defs> <text fill="red"> <textPath xlink:href="#textPath">Text on a Path</textPath> </text> ... 回答2 您当然可以在canvas上进行操作,请尝试以下代码作为示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing min-width and max-width</title> <style type="text/css"> </style> </head> <body> <canvas id="cnv"></canvas> <script type="text/javascript" charset="utf-8"> cnv = document
  • 如何修复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
  • 画布文本渲染(模糊)(Canvas text rendering (blurry))
    问题 我知道这个问题已经被问过很多次了,但是我尝试了几乎所有可以在网上找到的东西,但是无论我尝试了什么(以及使用什么组合),仍然无法在画布上正确呈现文本。 对于模糊的线条和形状问题,只需将+ 0.5px添加到坐标即可解决该问题:但是,此解决方案似乎不适用于文本渲染。 注意:我从不使用CSS来设置画布的宽度和高度(只尝试过一次以检查在HTML和CSS中设置大小属性是否会改变任何内容)。 同样的问题似乎与浏览器无关。 我试过了 : 用HTML创建画布,然后用javascript而不是html创建画布在HTML元素中设置宽度和高度,然后使用JS,然后同时使用HTML和JS 使用所有可能的组合将0.5px添加到文本坐标更改字体系列和字体大小更改字体大小单位(px,pt,em) 使用不同的浏览器打开文件以检查是否有任何更改使用canvas.getContext('2d', {alpha:false})禁用Alpha通道canvas.getContext('2d', {alpha:false})这只是使我的大多数图层消失而没有解决问题 在此处查看canvas和html字体渲染之间的比较:https://jsfiddle.net/balleronde/1e9a5xbf/ 甚至有可能使画布中的文本像dom元素中的文本一样呈现吗? 任何意见或建议将不胜感激 回答1 画布上的DOM质量文本。 仔细看看
  • 如何找到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
  • 绘图文字到 @ font-face第一次无法使用(Drawing text to <canvas> with @font-face does not work at the first time)
    问题 当我在具有通过@ font-face加载的字体的画布中绘制文本时,该文本无法正确显示。 它根本不显示(在Chrome 13和Firefox 5中),或者字体错误(Opera 11)。 这种类型的意外行为仅在带有字体的第一个图形上发生。 之后,一切正常。 这是标准行为还是什么? 谢谢你。 PS:以下是测试用例的源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>@font-face and <canvas></title> <style id="css"> @font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P.ttf'); } </style> <style> canvas, pre { border: 1px solid black; padding: 0 1em; } </style> </head> <body> <h1>@font-face and <canvas></h1> <p> Description: click the button several times, and you will see the problem. The first line won't show at all, or
  • 画布图像遮罩/重叠(Canvas image masking / overlapping)
    问题 在我的项目中,我必须使用画布在另一个相同尺寸和图案的图像上实现一个不同的彩色图像,并且图像不是圆形或矩形。 所有这些都是波浪形的,它将应用于单个主背景图像,以便在每个onclick函数上显示多个图形。 重叠的图像应更改为另一种选择的颜色。 我的问题是使用画布有什么办法,我们可以更改由画布绘制的图像颜色,或者我们需要始终使用不同的图像并通过CSS / jQuery进行应用。 我阅读了有关画布图像蒙版和重叠的内容。 但是无法理解我的图像,因为它们不是正方形或圆形,那么第一件事就是我如何在单个图像上绘制多个波形。 我不知道我搜索了什么,但没有找到完美的解决方案。 我的需要是在画布上绘制一个波浪图像,并通过单击功能更改其颜色,并使用背景图像设置另一个div,然后再将两个画布重叠。 这可能吗? (这意味着:此功能用于在汽车上创建或设置多个图形,因为每个图形图像都需要设置在画布中,而另一个图形需要在div和第一个画布上重叠) 回答1 您可以使用上下文合成来替换图像的一部分。 例如,如果您已经有这个蓝色徽标作为图像: 任何您想要徽标的顶部被涂成紫色的颜色: 您可以使用合成为图像的顶部重新着色。 首先,用你最喜爱的图像编辑器来裁剪掉你不想重新着色的任何部分。 剩下的叫做叠加层。 图像的此覆盖部分就是我们将以编程方式重新着色的内容。 该覆盖可以通过编程方式重新着色为任何颜色。
  • 如何使用CSS过滤器从画布保存图像(How to save image from canvas with CSS filters)
    问题 我需要在客户端使用CSS过滤器后保存图像(不使用后端)。 到目前为止,我有: 使用CSS过滤器转换为画布使用var data = myCanvas.toDataURL("image/png");保存var data = myCanvas.toDataURL("image/png"); 哭了图片已保存,没有任何影响。 Index.html <div class="large-7 left"> <img id="image1" src="./img/lusy-portret-ochki-makiyazh.jpg"/><br> <canvas id="myCanvas"></canvas> </div> Photo.js var buttonSave = function() { var myCanvas = document.getElementById("myCanvas"); var img = document.getElementById('image1'); var ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null; ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height); var grayValue = localStorage
  • 确定HTML5画布中字符串的宽度(Determine width of string in HTML5 canvas)
    问题 我正在图像(模因生成器)顶部的HTML5画布中绘制文本。 我想计算一个字体大小,以便该字符串跨越画布的整个宽度。 因此,基本上,JavaScript中是否有一种方法可以确定对于给定宽度的某种字体的某些字符串我应该使用哪种字体大小? 回答1 fillText()方法有一个可选的第四个参数,它是呈现字符串的最大宽度。 MDN的文档说... maxWidth 可选的; 绘制的最大宽度。 如果指定了该字符串,并且计算出的字符串的宽度大于此宽度,则将字体调整为使用水平方向更紧凑的字体(如果可用,或者可以通过水平缩放当前字体来合成合理可读的字体)或更小字体。 但是,在撰写本文时,跨浏览器还不支持该参数,这导致第二种解决方案使用measureText()来确定字符串的尺寸而不渲染它。 var width = ctx.measureText(text).width; 这是我可能会做的... var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); // Font sizes must be in descending order. You may need to use `sort()` // if you can't guarantee this, e.g. user input. var
  • 用Java脚本从pdf提取文本(extract text from pdf in Javascript)
    问题 我想知道是否可以仅使用Javascript将文本包含在PDF文件中? 如果是,谁能告诉我如何? 我知道有一些服务器端的Java,C#等库,但我宁愿不使用服务器。 谢谢 回答1 这是一个古老的问题,但是由于pdf.js多年来一直在发展,所以我想给出一个新的答案。 也就是说,它可以在本地完成,而无需涉及任何服务器或外部服务。 新的pdf.js具有一个函数:page.getTextContent()。 您可以从中获取文本内容。 我已经用下面的代码成功地做到了。 您在每个步骤中得到的都是诺言。 您需要使用以下方式进行编码: .then( function(){...})继续进行下一步。 1) PDFJS.getDocument( data ).then( function(pdf) { ) PDFJS.getDocument( data ).then( function(pdf) { 2) pdf.getPage(i).then( function(page){ ) pdf.getPage(i).then( function(page){ 3) page.getTextContent().then( function(textContent){ 您最终得到的是一个字符串数组textContent.bidiTexts[] 。 您将它们串联起来可获得1页的文本。
  • Facebook Graph API-使用JavaScript上传照片(Facebook Graph API - upload photo using JavaScript)
    问题 是否可以使用JavaScript使用Facebook Graph API上载文件,我好像已经关闭了。 我正在使用以下JavaScript var params = {}; params['message'] = 'PicRolled'; params['source'] = '@'+path; params['access_token'] = access_token; params['upload file'] = true; function saveImage() { FB.api('/me/photos', 'post', params, function(response) { if (!response || response.error) { alert(response); } else { alert('Published to stream - you might want to delete it now!'); } }); } 运行此程序后,我收到以下错误... "OAuthException" - "(#324) Requires upload file" 当我尝试研究此方法时,我所能找到的是一种可以解决该问题的php方法 $facebook->setFileUploadSupport(true); 但是,我正在使用JavaScript
  • 在浏览器中将SVG转换为图像(JPEG,PNG等)(Convert SVG to image (JPEG, PNG, etc.) in the browser)
    问题 我想通过JavaScript将SVG转换为位图图像(如JPEG,PNG等)。 回答1 通过JavaScript的方法如下: 使用canvg JavaScript库通过Canvas渲染SVG图像:https://github.com/gabelerner/canvg 根据以下说明,从Canvas捕获编码为JPG(或PNG)的数据URI:将HTML Canvas捕获为gif / jpg / png / pdf? 回答2 jbeard4解决方案效果很好。 我正在使用Raphael SketchPad创建SVG。 链接到步骤1中的文件。 对于“保存”按钮(svg的ID为“ editor”,canvas的ID为“ canvas”): $("#editor_save").click(function() { // the canvg call that takes the svg xml and converts it to a canvas canvg('canvas', $("#editor").html()); // the canvas calls to output a png var canvas = document.getElementById("canvas"); var img = canvas.toDataURL("image/png"); // do what
  • 钉钉小程序+canvas生成公章
    公司最近有一个需求,就是想在钉钉小程序上自动生成并上传公章。从网上查了一些资料,发现关于钉钉小程序的比较少,最后发现了这篇博客:https://blog.csdn.net/educast/article/details/79990326,它是html+js+canvas版的,下面是我修改过后的钉钉小程序版的,大体上的方法与原生是一样的 1、先上效果图 2、test.axml页面 <view> <view> 输入公司名称: <input id="dw" width="50" type="text" placeholder="请输入公司名称" onInput="bindKeyInput1" /> </view> <view> 章下面文字: <input id="mdtext" width="50" type="text" placeholder="章下面的文字" onInput="bindKeyInput2" /> </view> <canvas id="canvas" width="400" height="400" style="width:200px;height:200px;background:pink;"/> <view onTap="createSeal"> 生成公章 </view> </view> 3、test.js页面 Page({ data: { company: