程序员经验分享-hwhale

缩放添加到画布的图像

2024-04-03

我正在尝试从 svg 创建图像。

到目前为止，我所做的是捕获使用 RaphaelJS 创建的内联 svg，然后使用 svg 代码创建图像，然后将其添加到画布中，我在这里找到了一篇文章，向我展示了如何将图像缩放到适合画布。

不过，我想把图像放大。我对 svg 和 canvas 相当陌生，所以我不确定这是否是一个好方法。我的最终目标是生成可以添加到 pdf 中的图像。我使用的代码如下。

var svgc = document.getElementById('graph').innerHTML;
var image = new Image();
image.src = "data:image/svg+xml," + encodeURIComponent(svgc);
var canvas = document.getElementById('viewport');

context = canvas.getContext('2d');

drawImageScaled(image, context);

function drawImageScaled(img, ctx) {
    var canvas = ctx.canvas;
    var hRatio = canvas.width / img.width;
    var vRatio = canvas.height / img.height;
    var ratio = Math.min(hRatio, vRatio);
    var centerShift_x = (canvas.width - img.width * ratio) / 2;
    var centerShift_y = (canvas.height - img.height * ratio) / 2;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, img.width, img.height,
                  centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
}

我需要调整画布大小，因为生成的图像太小了。

我想我需要调整图像大小，但我不知道如何调整。感谢您的任何帮助。

我在下面包含了 raphael js 创建的 svg。

<svg height="500" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: -0.5px;">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
    <rect x="200" y="20" width="50" height="460" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
    <rect x="200" y="20" width="50" height="50" rx="0" ry="0" fill="#ffff00" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;" opacity="0.5" stroke-width="2"></rect>
    <path fill="none" stroke="#000000" d="M300,20L700,20" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <text x="350" y="30" text-anchor="middle" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Sample Info</tspan></text>
    <rect x="200" y="20" width="20" height="50" rx="0" ry="0" fill="#00cc00" stroke="#000000" opacity="0.5" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></rect>
    <rect x="200" y="70" width="50" height="100" rx="0" ry="0" fill="#ff0000" stroke="#000000" opacity="0.5" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></rect>
    <path fill="none" stroke="#000000" d="M300,70L700,70" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <text x="350" y="80" text-anchor="middle" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Sample Info</tspan></text>
    <rect x="200" y="170" width="50" height="300" rx="0" ry="0" fill="#0033cc" stroke="#000000" opacity="0.5" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></rect>
    <path fill="none" stroke="#000000" d="M300,170L700,170" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <text x="350" y="180" text-anchor="middle" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Sample Info</tspan></text>
    <text x="195" y="480" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">0</tspan></text>
    <text x="195" y="434" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">50</tspan></text>
    <text x="195" y="388" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">100</tspan></text>
    <text x="195" y="342" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">150</tspan></text>
    <text x="195" y="296" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">200</tspan></text>
    <text x="195" y="250" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">250</tspan></text>
    <text x="195" y="204" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">300</tspan></text>
    <text x="195" y="158" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">350</tspan></text>
    <text x="195" y="112" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">400</tspan></text>
    <text x="195" y="66" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">450</tspan></text>
    <text x="195" y="20" text-anchor="end" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: 'Fontin Sans', Fontin-Sans, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal;" font="11px 'Fontin Sans', Fontin-Sans, sans-serif"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">500</tspan></text>
    <path fill="none" stroke="#000000" d="M200.5,480L200.5,20M196,480.5L201,480.5M196,434.5L201,434.5M196,388.5L201,388.5M196,342.5L201,342.5M196,296.5L201,296.5M196,250.5L201,250.5M196,204.5L201,204.5M196,158.5L201,158.5M196,112.5L201,112.5M196,66.5L201,66.5M196,20.5L201,20.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <rect x="100" y="20" width="15" height="460" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
    <rect x="85" y="250" width="15" height="230" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
    <rect x="115" y="250" width="15" height="230" rx="0" ry="0" fill="none" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
    </svg>

问题是我没有通过将画布宽度和高度设置为与 svg 相同来设置画布高度和宽度，它已更正了图像大小。


你必须定义width and height显式地显示 svg 图像。 例如

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="150" height="150" fill="green" stroke-width="10" stroke="black"/>
</svg>

see http://jsfiddle.net/372gtsw9/ http://jsfiddle.net/372gtsw9/

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

html

canvas

SVG

缩放添加到画布的图像 的相关文章

  • 如何制作 HTML/CSS/JS 变色背景（如 Kahoot.it 那样）

    如何使用 html 和 css 以及可能的 javascript 制作类似于 waht 的颜色变化 褪色背景https kahoot it https kahoot it has 你应该学会检查和获取 keyframes bgcolor 0

  • 单击菜单外部以关闭菜单时，Bootstrap 导航栏“闪烁”

    我遇到了导航栏问题 当您单击菜单外部以关闭菜单时 导航栏会出现 闪烁 如果在单击菜单外时按住鼠标 则闪烁会持续存在 如下所示 我认为这可能与角度有关 而不是与CSS有关 主要是因为其他人未能在小提琴上复制它 上一个问题在这里 https s

  • 如何在网格视图的单元格中插入换行符？

    我想知道如何在网格视图的单元格中添加换行符 现在 我把 1 1 1 然而 这呈现为 1 1 1 如何修复换行符 以便每个数字显示在自己的行上 Add HtmlEncode False to asp BoundField并且在正文中 应该有

  • KineticJS - 将舞台缩放到视口

    我正在努力将默认分辨率设置为 1366x756 我会根据视口来放大和缩小它 类似于此处显示的示例 http blogs msdn com b davrous archive 2012 04 06 modernizing your html5

  • Typeahead.js 干扰 Bootstrap 输入组

    如何防止 Typeahead js 拆分我的 Twitter Bootstrap 3 输入组 每当我将 Typeahead javascript 指向属于输入组一部分的文本区域时 连接的文本区域和提交按钮就会停止连接 这只是 Typeahe

  • 如何获取 svgElement 的比例？

    我正在研究 svg div style width 300 height 300 div

  • 禁用 Materialise Carousel 上的触摸

    看起来以前没有人问过这个问题 因为我几乎在互联网上寻找一个非常简单的答案 如何禁用在物化轮播上向左 向右滑动的功能 在 Materialize js 添加 编辑 var allowCarouselDrag true value functi

  • 正确缩放 Javascript Canvas 游戏

    我正在尝试根据屏幕尺寸动态缩放画布游戏 我了解如何根据屏幕尺寸调整画布大小 但我也想调整内容大小 基本上我希望游戏在每台设备上看起来都一样 我目前遇到的问题是 当拥有 4k 屏幕的人玩游戏时 他们可以轻松看到整个地图 当有人的屏幕非常小时

  • 带有子 div 的 div 的背景颜色

    div div This is a text inside a div element div div We are still in the div element div div Why isnt the background colo

  • 检测视频何时缓冲，如果缓冲则显示 gif

    我想知道是否有办法在视频缓冲时显示 gif 我正在使用 HTML5 视频标签 其中有一种方法可以检测视频何时缓冲 如果没有 是否有替代方法 我看过 如何检测视频何时缓冲 https stackoverflow com questions 1

  • 强制 PayPal 始终请求信用卡信息而不是登录表单？

    我们的网站采用贝宝付款标准 当用户在我们的网站上填写他们的请求并按下 PayPal 按钮 立即购买 时 我们会将所有变量提交给 PayPal 以便他们可以处理付款 对于那些以前从未使用过贝宝并通过我们的网站付款的用户来说 它运行得非常好 因

  • 如何使用正则表达式进行正确的输入验证？

    我想让用户只输入整数或浮点数 现在我只能输入整数 它允许输入点或逗号 无法找到正确的正则表达式来验证整数和浮点数

  • 如何在 HTML5/CSS3 中将视口锁定为纵向方向

    是否可以在移动设备上将视图端口的方向锁定为纵向 我用谷歌搜索了它 但无法找到确切的操作方法 这个技巧应该有效 media screen and orientation landscape html Rotate the content co

  • 使用 MailTo 链接，我可以向发件人发送副本吗？

    我们开发了一个非常简单的表单 一旦提交 就会填充一封电子邮件以发送支持票证 这些电子邮件目前发送给我们的 支持人员 但如果我们也能向发件人发送一份副本 那就更理想了 我们正在使用 mailto 链接 这可能吗 例如 我们的员工 Brad 填

  • 如何在没有 DOM 的情况下将 javascript 作为 node.js 脚本运行？

    https github com jasondavies d3 cloud https github com jasondavies d3 cloud是一个使用 D3 库的 javascript 文字云 这是一个交互式演示 http www

  • 如何保存包含框架/iframe 的完整 html 页面？

    在网页抓取期间 我想将当前页面的 html 保存到文件中以供以后调试 browser html在大多数情况下有帮助 但是当页面包含 iframe frame 时 它 的内容不会返回browser html 我必须用类似的东西单独得到它bro

  • 如何使表格单元格的最小宽度为 3 位数字？

    如何使表格中的每个单元格的最小宽度为 3 位数字且不会更大 现在我正在硬编码min width 但我不喜欢硬编码一个值 因为我将来可能想更改字体 如果需要Javascript也没关系 table border 1 tr td 1 td td

  • 将水平线添加到 html rmarkdown 文档隐藏文本部分

    我正在制作一个与 HTML 页面结合的 Rmarkdown 文档 我不想用标题或项目符号分隔某些文本部分 而是想在它们之间绘制水平线 根据http rmarkdown rstudio com authoring basics html ht

  • 响应覆盖 div 下的链接

    场景是这样的 我已经构建了一个顶部导航原型 它需要在其顶部有一个覆盖 透明 PNG 图像 目前它覆盖了大约 1 3 的链接 请看下面 有什么方法可以让前 1 3 的链接做出响应 即使有一个 div div 部分覆盖它们 覆盖层不会包含任何可

  • html 下钻下拉所选值未插入 MYSQL

    我有两个下拉列表 首先从数据库下拉填充 根据第一个下拉列表的选定值从数据库填充第二个下拉列表 document ready function c change function var c1 c selected text if c1 aj

随机推荐

  • 为什么 Rails 不引发 I18n::MissingInterpolationArgument 异常？

    我创建了一个虚拟 Rails 4 1 5 应用程序来显示 I18ntranslate当未提供要插值的变量时 方法不会引发 I18n MissingInterpolationArgument 仅当提供错误的内容时才会引发该异常 这是预期的行为

  • 从源代码构建 Docker 失败

    从 dotcloud docker git 克隆之后 cd docker sudo make VERBOSE 1 Fetching https net http cookiejar go get 1 https fetch failed u

  • 撤消已推送的合并

    好吧 我弄得有点乱了 显然 在我家里的机器上 开发分支没有更新 我做出了承诺并推动了 结果是实际的 origin develop 分支已合并到我的本地开发分支中 由于某种原因 它被视为不同的分支 一方面 我真的不明白这是怎么发生的 其次 我

  • 通用二叉树节点析构函数问题

    我一直在做一项作业 现在我被有问题的析构函数困住了 我必须创建一个包含所有常用成员函数和一些特殊运算符的通用二叉树 还有一个限制 一切都必须迭代地工作 所以这次没有令人讨厌的递归黑客 BinTreeNode 类的析构函数显然有一些非常错误的

  • Laravel 中 detach() 方法也可以应用于一对多关系吗？

    在 Laravel 文档中 我发现 detach 方法可以分离多对多关系中的所有对象 detach 方法也可以应用于 Laravel 中的一对多关系吗 如果不是 在这种情况下如何分离所有 n 个对象 在多对多关系中 detach 方法仅删除

  • 更改通过文字初始化创建的对象的原型

    假设我只想使用 不是构造函数 我有一个这样的对象 var o name Jack 如果我想创建另一个对象 其原型是o我使用这个语法 var u Object create o console log u name prints Jack u

  • 传递具有可变大小的二维数组

    我正在尝试将二维数组从一个函数传递到另一个函数 然而 数组的大小不是恒定的 尺寸由用户决定 我曾尝试对此进行研究 但运气不佳 大多数代码和解释都是针对数组的恒定大小 在我的函数中A我声明该变量 然后对其进行一些操作 然后必须将其传递给 Fu

  • 如何使用 shell 始终获取下载 tomcat 服务器的最新链接

    我写了一个shell脚本来下载并安装tomcat服务器v 8 5 31 wget http www us apache org dist tomcat tomcat 8 v8 5 31 bin apache tomcat 8 5 31 ta

  • 如何从 f:selectItems 获取标签和值

    我正在开发一个 JSF 页面 该页面有一个基于List

  • 在 hibernate 中使用 where 子句选择查询

    我有班级登录 其中有userId username and password 对于要登录的用户 我正在检查username and password并得到userId If userId不为零则它将引导至主页 我正在尝试在休眠状态下执行此操

  • AWS CodePipeline 并部署到 EKS

    正在开发 AWS CodePipeline 用于构建容器并将其部署到 EKS 集群 AWS CodePipeline 似乎不支持 仅 ECS 对 EKS 的部署操作 我尝试探索其他选项 例如使用 lambda 函数 我找到了以下在 lamb

  • Redmine 和 SVN：如何在提交发生后将修订链接到问题？

    这样我们就成功地将Redmine与SVN集成了 这是一个成熟的集成 已经几个月了 Post commit hook 更新 Redmine 中的存储库 SVN 提交中的评论可以完美地导入到 Redmine 中 它能够在问题和修订 日志时间 整

  • javascript es6 双箭头函数

    我想更好地理解 es6 箭头函数 给出以下示例 export default function applyMiddleware middlewares return createStore gt reducer preloadedState

  • 如何计算 MIDI 文件的时间长度

    我正在使用名为 midas 的有用库的帮助下读取 as3 flash cs5 中的 midi 文件 http code google com p midas3 http code google com p midas3 midi as3 库

  • 实现托管属性处理程序 Shell 扩展的正确方法是什么？

    现在 NET CLR 4 0 支持并行 SxS 操作 现在应该可以编写 shell 托管代码中的扩展 我已经尝试过并成功编码了属性处理程序 实现 IPropertyStore IInitializeWithStream 和 IPropert

  • SVG 无法在绝对定位的父级中正确调整大小

    我遇到一个问题 内联

  • 在 CakePHP v2.0 中使用电子邮件地址进行身份验证

    好吧 这个问题与我最近在 Stack Overflow 上问的问题类似 但我基本上只是使用 CakePHP 书中的代码而不是我自己的代码来尝试理解为什么有些东西不起作用 基本上 这个想法是允许用户在 Cake 2 0 版本中使用他们的电子邮

  • 当 iPhone 处于睡眠模式时，iPhone 应用程序延迟 10 -15 分钟

    我创建了一个使用 NSTimer 的应用程序 它每秒都会触发一次 我的问题是 如果 Iphone 处于睡眠模式 我会延迟 10 到 15 事件触发前的分钟数 我已经 stackoverflowed 并用谷歌搜索了这个 其原因似乎是手机在某些

  • 限制或扩展 dart 中的枚举

    我正在使用 dart 假设我有一个无法修改的枚举 可能很长 enum Animal cat dog lion tigger 是否可以限制这个枚举 我想获得 enum DomesticAnimal cat dog with DomesticA

  • 缩放添加到画布的图像

    我正在尝试从 svg 创建图像 到目前为止 我所做的是捕获使用 RaphaelJS 创建的内联 svg 然后使用 svg 代码创建图像 然后将其添加到画布中 我在这里找到了一篇文章 向我展示了如何将图像缩放到适合画布 不过 我想把图像放大

热门标签