jq绘图到图像

2023-12-25

我知道这个问题已经存在,但我认为它没有得到正确的回答。 到目前为止,我正在使用这种方法,对于我必须做的任何情节,它都 100% 有效。

请评论代码的效率等,我想知道其中是否还有错误。

非常感谢。

function jqplotToImg(obj) {
    var newCanvas = document.createElement("canvas");
    newCanvas.width = obj.find("canvas.jqplot-base-canvas").width();
    newCanvas.height = obj.find("canvas.jqplot-base-canvas").height()+10;
    var baseOffset = obj.find("canvas.jqplot-base-canvas").offset();

    // make white background for pasting
    var context = newCanvas.getContext("2d");
    context.fillStyle = "rgba(255,255,255,1)";
    context.fillRect(0, 0, newCanvas.width, newCanvas.height);

    obj.children().each(function () {
    // for the div's with the X and Y axis
        if ($(this)[0].tagName.toLowerCase() == 'div') {
            // X axis is built with canvas
            $(this).children("canvas").each(function() {
                var offset = $(this).offset();
                newCanvas.getContext("2d").drawImage(this,
                    offset.left - baseOffset.left,
                    offset.top - baseOffset.top
                );
            });
            // Y axis got div inside, so we get the text and draw it on the canvas
            $(this).children("div").each(function() {
                var offset = $(this).offset();
                var context = newCanvas.getContext("2d");
                context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
                context.fillStyle = $(this).css('color');
                context.fillText($(this).text(),
                    offset.left - baseOffset.left,
                    offset.top - baseOffset.top + $(this).height()
                );
            });
        } else if($(this)[0].tagName.toLowerCase() == 'canvas') {
            // all other canvas from the chart
            var offset = $(this).offset();
            newCanvas.getContext("2d").drawImage(this,
                offset.left - baseOffset.left,
                offset.top - baseOffset.top
            );
        }
    });

    // add the point labels
    obj.children(".jqplot-point-label").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.fillStyle = $(this).css('color');
        context.fillText($(this).text(),
            offset.left - baseOffset.left,
            offset.top - baseOffset.top + $(this).height()*3/4
        );
    });

    // add the title
    obj.children("div.jqplot-title").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.textAlign = $(this).css('text-align');
        context.fillStyle = $(this).css('color');
        context.fillText($(this).text(),
            newCanvas.width / 2,
            offset.top - baseOffset.top + $(this).height()
        );
    });

    // add the legend
    obj.children("table.jqplot-table-legend").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.strokeStyle = $(this).css('border-top-color');
        context.strokeRect(
            offset.left - baseOffset.left,
            offset.top - baseOffset.top,
            $(this).width(),$(this).height()
        );
        context.fillStyle = $(this).css('background-color');
        context.fillRect(
            offset.left - baseOffset.left,
            offset.top - baseOffset.top,
            $(this).width(),$(this).height()
        );
    });

    // add the rectangles
    obj.find("div.jqplot-table-legend-swatch").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.fillStyle = $(this).css('background-color');
        context.fillRect(
            offset.left - baseOffset.left,
            offset.top - baseOffset.top,
            $(this).parent().width(),$(this).parent().height()
        );
    });

    obj.find("td.jqplot-table-legend").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.fillStyle = $(this).css('color');
        context.textAlign = $(this).css('text-align');
        context.textBaseline = $(this).css('vertical-align');
        context.fillText($(this).text(),
            offset.left - baseOffset.left,
            offset.top - baseOffset.top + $(this).height()/2 + parseInt($(this).css('padding-top').replace('px',''))
        );
    });

    // convert the image to base64 format
    return newCanvas.toDataURL("image/png");
}

这不是一个错误,但如果您尝试将图像另存为 png,它会为图像生成透明背景。由您来处理背景图像。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jq绘图到图像 的相关文章

  • 使用 javascript 禁用按钮:FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python
  • 如何在 Java 中使用 HTML 解析器和 Apache Tika 来提取所有 HTML 标签?

    我下载了 tika core 和 tika parser 库 但找不到将 HTML 文档解析为字符串的示例代码 我必须删除网页源的所有 html 标签 我能做些什么 如何使用 Apache Tika 进行编码 您想要 html 文件的纯文本
  • 使用 PHP 获取 2 个同名 HTML 输入标签的值

    假设我有下表
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • 在 ASP.NET MVC 4 中使用 jQuery Mobile 1.3 面板时的双滚动条

    我无法弄清楚这一点 将以下代码放入布局页面并在浏览器中查看后 我将显示 2 个垂直滚动条 div div 遇到了类似的问题 并注意到只有在使用我的自定义主题时才出现这种问题 我以错误的顺序将自定义主题添加到页面 这导致了问题 正确的顺序是
  • Sequelize.js - “不关联到”

    我在从数据库获取完整数据时遇到一些问题 那是我的模型 User module exports function sequelize DataTypes return sequelize define user id type DataTyp
  • 有没有好的 JQuery twitter 小部件可以循环推文?

    我想知道是否有任何 JQuery 小部件提供了循环加载推文的功能 例如在官方小部件中http twitter com about resources widgets widget profile http twitter com about
  • 为 Meteor 数据创建编号列表

    有没有办法获取 Meteor 集合中项目的编号列表的 编号 我知道我可以在 html 中做到这一点 但我觉得如果我可以在 spacebars 中放置一些东西 那么样式会更容易 如果我可以使用更好的术语 请告诉我 像这样的东西 前 20 部电
  • 如何使用JQuery和Django(ajax + HttpResponse)?

    假设我有一个 AJAX 函数 function callpage ajax method get url abc data x 3 beforeSend function success function html IF HTTPRESPO
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph
  • 为什么 JSON 结果可以是布尔值而不是对象或数组?

    From JSON 网站 http json org JSON 建立在两种结构之上 名称 值对的集合 在各种语言中 这被实现为对象 记录 结构 字典 哈希表 键控列表或关联数组 值的有序列表 在大多数语言中 这被实现为数组 向量 列表或序列
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • 支持换行的 JQuery 工具提示

    我正在寻找一个轻量级的 jquery 插件 用于在用户将鼠标悬停在元素上时显示工具提示 我希望插件从标题属性中获取内容 而且我可以创建新行也很重要 任何帮助表示赞赏 在 jQuery 1 9 jquery jquery ui 和标准 too
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a
  • Nodejs 一个接一个地运行异步函数

    我是 JS nodejs 的新手 所以如果我不能提出切中要害的问题 请原谅我 所以基本上 如果我有两个异步函数 async function init async function main 如何确保在 init 完成其异步请求后调用 ma

随机推荐

  • 将自定义表单元素添加到 Adminhtml 表单

    有没有办法将自定义表单元素添加到 Magento Adminhtml 表单中 而不将自定义元素放置在lib Varian folder 我已经找到了本质上是一个的代码Varian Data Form Element factory publ
  • 如何等待Spark服务停止?

    对于我的 Spark API 我正在构建集成测试 有时我想停止并启动 Spark 实例 当我这样做时 有时会遇到这样的问题 我正在创建一个新的 Spark 实例 而旧的实例仍在单独的线程上关闭 了解 Spark 实例何时实际关闭会很有帮助
  • QTcpSocket / QTcpServer 内存管理 / 服务器崩溃

    我正在设计和制作一个服务器 它应该能够每秒处理大约 100 次以上的点击 我从服务器获取的信息只是 HTTP 标头 根据标头中的信息 它将查询数据库 不同线程 中的某些信息 并将最终信息发送回 QTcpServer QTcpServer 创
  • FBSQLException 键大小超出实现

    create table RHP EmployeElement amount double precision not null comment varchar 255 loan blob element codeId varchar 30
  • 同源图像 texImage2D 的安全错误

    我目前正在学习WebGL 在对 texImage2D 的调用 纹理加载完成时调用 中 我得到以下信息SecurityError Uncaught SecurityError Failed to execute texImage2D on W
  • Windows 中是否有代表“C:\Documents and Settings”文件夹或 C:\Users 文件夹的环境变量?

    Windows 中是否有表示配置文件路径的任何环境变量或其他格式 我想以这样的方式查询 我应该获取值 C Documents and Settings 如果是 windows XP 或 2k3 或 C users 如果是 vista 或 w
  • jQuery 对向后兼容性的支持程度如何?

    我们遇到了 Mootools 不太向后兼容的问题 特别是在拖放功能方面 我想知道是否有人遇到过 jQuery 不向后兼容的类似问题 我们开始大量使用它 并考虑升级到新版本以开始使用多个需要它的插件 如果我们摆脱旧版本会遇到任何问题吗 jQu
  • 如何从 Scala 执行 shell 内置命令

    我需要检查一些系统设置 例如ulimit n来自 Linux 中的 Scala 脚本 如果我处理普通命令 我会使用scala sys process封装如 import scala sys process println ls lha 不幸
  • 扩展隐藏了我想要访问的属性。解决方法?

    我正在使用两个 Pod DropDown https github com AssistoLab DropDown and SwiftyUtils https github com tbaranes SwiftyUtils DropDown
  • Prolog 中的简化旅行推销员

    我浏览过类似的问题 但找不到与我的问题相关的任何内容 我正在努力寻找一种算法或一组 循环 来找到一条路径CityA to CityB 使用数据库 distance City1 City2 Distance 事实 到目前为止我所做的事情如下
  • Selenium IDE - 总是因任何 500 错误而失败

    有没有一种简单的方法可以告诉 Selenium IDE 任何导致 http 500 响应的操作都意味着测试失败 我的测试有 75 个页面请求长 有时 我会在中间某个地方发生崩溃并烧毁 但测试结果会显示为绿色 查看selenium api j
  • iPad 弹出窗口 - 如何指向分段控件中的一个分段?

    我有一个 iPad 弹出窗口 想要向分段控件中的一个分段呈现 指向 下面的代码工作正常 除了指针指向分段控件的中间 我更希望它指向正确的段 即段 0 或段 1 if UI USER INTERFACE IDIOM UIUserInterfa
  • log4j的优点

    有什么好处log4j过度设定System out and System err输出到日志文件 从较高的层面来看 Log4j 相对于手动日志记录的优势在于 您可以将日志记录代码与您实际想要记录的内容以及您想要记录的位置和方式分离 有关日志记录
  • 字符串乘法与 for 循环

    我正在 CodingBat com 上解决一个 Python 问题 我为打印字符串 n 次的简单问题编写了以下代码 def string times str n return n str 官方结果是 def string times str
  • oauth2 框:grant_type 参数无效或参数丢失

    我不知道我做错了什么 但每次我尝试获取令牌 当然是在用户身份验证之后 结果总是 Invalid grant typeparameter orparametermissing 可能与Box API 在获取访问令牌时始终返回无效的 grant
  • 如何在 React 的 render() 中包含 Font Awesome 图标

    每当我尝试在 React 中使用 Font Awesome 图标时render 尽管它可以在普通 HTML 中工作 但它不会显示在生成的网页上 render function return div i class fa fa spinner
  • Google 地图上的移动位置跟踪

    我需要为我的网站开发一项功能 用户可以通过该功能跟踪 Google 地图上的任何手机号码 就像下面的链接一样 转到以下链接并输入9810098109文本框中的数字以查找其在地图上的位置 http wwwa way2sms com jsp L
  • Android:动画循环进度可绘制

    我需要一个看起来像旋转进度圈的可绘制对象 我想在 GridView 内的 ImageView 等中使用该可绘制对象 因此 根据其他帖子 我从文件夹 sdk platforms android xx data res drawable 中获取
  • Tensorflow错误:DLL加载失败:找不到指定的过程

    我尝试在我的windows8 1 64位python3 6 0中使用pip安装tensorflow cpu 使用pip install tensorflow但它给了我这个错误 Traceback most recent call last
  • jq绘图到图像

    我知道这个问题已经存在 但我认为它没有得到正确的回答 到目前为止 我正在使用这种方法 对于我必须做的任何情节 它都 100 有效 请评论代码的效率等 我想知道其中是否还有错误 非常感谢 function jqplotToImg obj va