如何根据用户的输入生成自定义图像？答案

【问题标题】：How to generate custom image based on user's inputs?如何根据用户的输入生成自定义图像？
【发布时间】：2019-08-08 16:33:06
【问题描述】：

我正在为一个使用 HTML/CSS/JS 的网站进行测验。测验中的每个问题都有几个可能的答案供您选择。完成测验后，您将获得 0-100% 的分数。

用户提交答案后，需要将用户重定向到另一个页面，该页面将显示他们的分数。

在这个页面上，我还需要用户看到一条线的图像，线的起点代表 0%，线的终点代表 100%。

箭头图像应指向代表其百分比分数的线条区域。这是的图片。

所以，我的问题是：如何动态自定义箭头的位置以适应 0-100% 的任何可能分数？

我在this 网站上看到过类似的事情，它会根据您对一组政治问题的回答，然后根据您的回答在图表上绘制一个点，为您提供自定义图像。任何帮助将不胜感激。

【问题讨论】：

欢迎来到 SO。请阅读How to ask a good question。请在问题中包含所有相关代码和图片。
你不需要做图片生成，你可以通过html、图片和css来实现。

标签： javascript html css image

【解决方案1】：

一个简单的方法应该是使用 html 和 css 显示结果。

我在其中一个项目中使用的代码如下：

<div id="mainDiv">
  <div id="resultArea" style="width:80%;">
    <div style='font-size:50px;display: inline-block; width: 30%; text-align: right;'>&#8615;</div>
      <div id="resultPercentage" style="padding: 10px 0; border: 1px solid #cccccc; background: #cccccc;">
        <span style="float: left; margin-top: 10px;">0</span>
        <span style="float: right;margin-top: 10px;">100</span>
     </div>
   </div>
   <p>&nbsp;</p>
</div>

请注意，在 id 为“userPercentage”的 div 中，最后一个样式“width: 30%”会将 unicode 箭头符号从 0 移动到 100..

【讨论】：

【解决方案2】：

HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
**HTML:**
<label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">
**CSS**
label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

.note {
    font-size: .8em;
}

【讨论】：

我认为，代码不完整。而且它对OP的问题没有任何意义