将画布中输入的文本检索为字符串

Retrieve Text Entered In Canvas As String

本文关键字：文本检索 字符串 输入 布中      更新时间：2023-09-26

我正在尝试在directouttasomewhere.com中实现功能。用户将文本输入到画布元素中。接下来，在你上传或不上传图片后，你会看到推特和脸书的共享链接。

这两个链接附加了您在画布中输入的值。使用了占位符{CITY}，但我看不到具有该名称的元素。

他们的javascript文件很难理解，即使在解析时也是如此。js链接

<canvas id="canvas" width="846" height="846"></canvas>
<a href="#" target="share" data-text="I'm #StraightOutta {CITY}. Where you from? #BeatsByDre" data-popwidth="550" data-popheight="420" class="button twitter"></a>

我想返回输入的文本并用它替换{CITY}。

我检查了链接，哦，等等，我知道发光的光标。。

签入源。。。

;fabric.IText=fabric.util.createClass(fabric.Text,fabric.Observable,{type:"i-text",selectionStart:0,selectionEnd:0,s

与其模仿js的行为，美化它，研究它并遵循它，不如从github中派生它，它是免费的，受mit许可，并得到了作者的良好支持。

在这里探索https://www.fabricjs.com

叉在这里https://github.com/kangax/fabric.js

您可以下载所有库，或者只使用您需要的部分构建一个迷你版本。（画布、静态画布、文本、iText）

function getText() {
  alert(canvas.getObjects()[0].text);
}
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.IText("STRAIGHT'nOUTTA'n ", {textAlign: 'center', active: true}));
<button onClick="getText()" >GET THE TEXT</button>
<script src="http://www.deltalink.it/andreab/fabric/fabric.js" ></script>
        <canvas id="canvas" width=500 height=400 style="height:200px;width:500px;"></canvas>

相关文章：