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 OpenLayers

    我正在尝试将 OpenLayers 设置为在缩放开始之前不显示矢量图层 并使其在缩放结束后重新出现 我已经像这样建立了缩放结束部分 map new OpenLayers Map map element eventListeners zoom
  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一
  • 如何在 Java 中使用 HTML 解析器和 Apache Tika 来提取所有 HTML 标签?

    我下载了 tika core 和 tika parser 库 但找不到将 HTML 文档解析为字符串的示例代码 我必须删除网页源的所有 html 标签 我能做些什么 如何使用 Apache Tika 进行编码 您想要 html 文件的纯文本
  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie
  • nodejs mocha suite 未定义错误

    我正在尝试使用摩卡运行一些测试 但似乎无法克服这个错误 E tdd nodejs cart gt mocha cart test js node js 201 throw e process nextTick error or err Re
  • 将上部字符转换为下部字符,将下部字符转换为上部字符(反之亦然)[重复]

    这个问题在这里已经有答案了 我需要将某些字符串中的所有较低字符转换为较高字符 并将所有较高字符转换为较低字符 例如 var testString heLLoWorld 应该 HEllOwORLD 转换后 在不保存临时字符串的情况下实现此目的
  • Javascript 正则表达式来匹配正则表达式

    我正在研究一个特殊的正则表达式来匹配 javascript 正则表达式 现在我有这个正则表达式工作 i g m 例如 foo match i g m gt foo foo undefined foo i match i g m gt foo
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • Sequelize.js - “不关联到”

    我在从数据库获取完整数据时遇到一些问题 那是我的模型 User module exports function sequelize DataTypes return sequelize define user id type DataTyp
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • jQuery 检索和设置 html select 元素的选定选项值

    我正在尝试使用 jQuery 检索并设置选择元素 下拉列表 的选定值 为了检索我已经尝试过 myId find selected val 也 myId val 但两者都返回未定义 任何对此问题的见解将不胜感激 要获取 设置选择元素的实际 s
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 支持换行的 JQuery 工具提示

    我正在寻找一个轻量级的 jquery 插件 用于在用户将鼠标悬停在元素上时显示工具提示 我希望插件从标题属性中获取内容 而且我可以创建新行也很重要 任何帮助表示赞赏 在 jQuery 1 9 jquery jquery ui 和标准 too
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行
  • 利用重力效果拖动元素

    我想完成类似于 photoshop com 和此网站的功能 http mrdoob com projects chromeexperiments google gravity http mrdoob com projects chromee

随机推荐

  • 将自定义表单元素添加到 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