将多个canvas转换为html5中的dataURL

2023-12-24

我想加入多个画布来制作一个图像。 那么有没有什么方法可以将多于一张画布隐藏起来toDataURL制作单个图像?


创建一个函数,该函数接受多个参数(画布元素),将它们放在一个空白画布上,然后返回新制作的画布的 dataurl。

var getImadeData = function () {
    var i = arguments.length,
        tempCanvas = document.createElement("canvas"),
        ctx = tempCanvas.getContext("2d");
     while (i--) {
        ctx.drawImage(arguments[i], 0, 0);
    };
    return tempCanvas.toDataURL();
};

现在只需向函数提供您想要放入一个 dataurl 的多个画布元素,如下所示。

var newData = getImageData(canvas1, canvas2, canvas3);

在此示例中,最后一个画布首先放置在空白画布上,因此请确保正确排序画布元素。

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

将多个canvas转换为html5中的dataURL 的相关文章

  • 来自 DataURL 的 Blob?

    Using FileReader s readAsDataURL 我可以将任意数据转换为数据 URL 有没有办法将数据 URL 转换回Blob使用内置浏览器 API 的实例 用户 Matt 一年前提出了以下代码 如何在javascript中
  • 未捕获的类型错误:this.props.signinUser 不是一个函数(…)

    src actions index js import axios from axios const ROOT URL http localhost 3090 export function signinUser email passwor
  • JavaScript 变量赋值与 OR 对比 if 检查[重复]

    这个问题在这里已经有答案了 在 JavaScript 中 我最近意识到你可以使用 OR 赋值的逻辑运算符 我想知道这是否被认为是不好的做法 特别是 我有一些具有可选数组输入的函数 如果输入是null or undefined我应该将它设置为
  • Youtube 播放器 Iframe,在 Firefox 上有声音但没有视频

    我正在使用 YT Player API 在滑块内创建多个 iframe youtube 视频 第一个视频在 onYouTubeIframeAPIReady 之后调用 当我单击正常工作的下一个按钮时 会出现下一个视频 但是当我尝试在 Fire
  • 我的 iPhone 6 获取 iPhone 5 媒体查询

    我不明白这里发生了什么事 我在 CSS 媒体查询中专门针对 iphone 5 media only screen and min device width 320px and max device width 568px some div
  • Chrome SuppressDifferentOriginSubframeJSDialogs 使用 JS 设置覆盖?

    Chrome 开发团队显然刚刚推出了一项名为 SuppressDifferentOriginSubframeJSDialogs 的新 功能 这使得默认情况下不会显示来自与父级不同域上的 iFrame 的警报 确认框 https www ch
  • JQuery 动画文本

    找到简单 简单的动画文本是非常困难的 喜欢这个网站上的 内爆 http codecanyon net item jquery text animation full screen preview 233445 http codecanyon
  • 从未定义解构时避免错误

    可以说我有这个代码 const x y point Babel 会将其变成 var point point x point x y point y 这很好 但是如果点未定义怎么办 现在我得到一个错误 Cannot read property
  • 在 JavaScript 中比较表单中的两个数字

    当我尝试比较不同的数字时 数字发生变化 但文本部分保持不变 这只发生在较大 较小的情况下 而不会发生在 NaN 或相等的情况下 这是我的代码 function check var a document getElementById a va
  • 使用 Javascript / Jquery 的本地存储(不使用 HTML5)

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事
  • 使用 jQuery 仅从字符串末尾修剪空格

    我知道 jQuery trim 函数 但我需要的是一种仅从字符串末尾修剪空格的方法 而不是开头 So str this is a string 会成为 str this is a string 有什么建议么 Thanks 您可以使用正则表达
  • 光滑的轮播缓动示例

    我正在使用 Slick Carousel http kenwheeler github io slick http kenwheeler github io slick 但不知道如何合并不同的幻灯片切换 有人有例子可以分享吗 这是我目前拥有
  • 点击问题:动态生成的链接不触发点击功能

    下面是两个代码片段 由于某种原因什么也没有发生 但来自同一个 JS 文件的其他 jQuery 函数在带有 UL 的页面上执行得很好 这是在盯着我看吗 ul class paganation li 1 li li a href 2 a li
  • 专用网络:web3.eth.getAccounts() 始终发送空数组

    我正在运行一个私人以太坊网络 我确实用https aws amazon com blockchain templates 整个设置已经完成 AWS 上的设置看起来正确 现在 我正在尝试创建帐户并检索所有这些帐户 为此 我使用以下方法 Web
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好
  • RTCDataChannel发送方法不发送数据

    我的 RTCDataChannel 遇到一个奇怪的问题 我正在对 WebRTC 进行一些研究 并且已经可以进行 WebRTC 音频 视频聊天 现在我想使用 RTCDataChannel 添加文本聊天和文件共享 我已经像这样创建了 RTCDa
  • 如何在粘贴时获取文本区域输入字段的新值?

    我发现当我尝试从文本区域字段读取值时onpaste调用函数时 我得到字段的旧值 粘贴操作之前的值 而不是新值 粘贴操作之后的值 以下是此行为的演示 http jsfiddle net qsDnr http jsfiddle net qsDn
  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di
  • 通过 vh 和 vw 调整 css 字体大小

    所以我想根据容器的大小自动调整文本的大小 但是如果我使用类似的东西 font size 5vw 看起来不错 但是当我缩小页面时 高度开始变得太小 无论如何 我是否可以根据 vh 和 vw 调整文本大小 例如 如果我只是减小页面的宽度 那么高
  • 获取淘汰赛中被点击元素的索引

    获取无序列表中单击元素的索引的最佳方法是什么 让我举个例子 假设我有以下 HTML 代码 ul li p p li ul 现在我有以下 javascript 代码来获取索引 self itemClicked function data it

随机推荐

  • Wicket.Ajax.Call.failure:解析响应时出错:需要对象

    我只是花了几个小时来调试这个问题 我在这里为其他人记录它 问题 当我尝试单击某个时出现以下错误AjaxLink在 Internet Explorer 中 Wicket ERROR Wicket Ajax Call failure Error
  • WPF故事板死亡

    C public partial class MainWindow Window Storyboard a new Storyboard int i public MainWindow InitializeComponent a Compl
  • 将 xs:string 转换为 jaxb 中的 java.util.UUID

    在jaxb中 如何将xsd中的字符串转换为java util UUID 是否有内置的数据类型转换器或者我必须创建自己的自定义转换器 This is much如果您从 Java 类开始并使用 JAXB 注释 那么事情会变得更容易 但是 要使用
  • 为什么我的 C++/CX 单元测试没有失败?

    我在 VS 2012 C CX 中有以下 Windows Store Metro Style 测试方法 这个成功了 就ok了 TEST METHOD TestMethod bool passed false concurrency even
  • 与旧系统的 CQRS

    我希望将一个具有清晰域模型的相对较新的基于 Web 的应用程序转换为更多 CQRS 风格的系统 我的新应用程序本质上是对现有旧系统的增强替代 我的组织中的现有系统共享一组通用数据库 这些数据库由整个公司孤岛中存在的无数应用程序 通过混沌方法
  • 为什么使用 GLib 函数?

    在使用 C 和 GTK 编程时 为什么使用 更好 g strdup printf g free g strcmp0等等 以及其他 GLib 函数 一般来说 GLib 的目的是一个实用程序和可移植性库 这些本身就是考虑使用它的理由 您提到的特
  • 我可以执行原始 SQL 查询、利用准备好的语句而不使用 ActiveRecord::Relation::QueryAttribute 吗?

    我想做一个upsert https www postgresql org docs 10 static sql insert html SQL ON CONFLICT Rails 还不支持这个 查询是这样的 INSERT INTO foos
  • 如何在 Lua 中的特定日期、特定时间执行全局函数?

    我正在 Lua 中编写一个脚本 其中许多其他函数将在特定日期的特定时间执行单个循环 当按下按钮时就会启动循环 现在我思考了一会儿 我发现我必须使用 os time 以毫秒为单位检查系统时间 它以表格形式也可以返回日期 这非常有帮助 我唯一困
  • 是否可以强制现有 Java 应用程序使用不超过 x 个内核?

    我们正在对现有 Java 程序进行基准测试 它们是线程应用程序 旨在从多核 CPU 中受益 我们想测量核心数量对运行速度的影响 但我们不愿意 也无法 更改这些应用程序的代码 当然 我们可以在不同的机器上测试软件 但这既昂贵又复杂 我们宁愿有
  • 严格标准:以非静态方式访问静态属性内容::$total

    这是我的代码 class content public text public static total function construct content this gt text content this gt total 0 pub
  • 如何用PHP获取页面访问者所在国家? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 对于我正在开发的网站 我希望它能够显示每个国家 地区有多少用户访问过我的网站 但我很好奇的是如何获取用
  • javascript CPU 使用率过高 - 如何调试?

    查找 javascript cpu 使用率高的原因的最佳方法是什么 我有一个脚本 可以简单地从缩略图库中加载 flickr 中的照片 它们加载后 什么也不做 等待您单击它们以显示在灯箱中 但 cpu 使用率仍然是 25 或更多 我打开了 F
  • Ndepend CQL 使用特定框架程序集查找某些类型的方法

    为了检查不是从某些基类派生的类型是否正在使用低级框架程序集 可以使用以下查询 SELECT TYPES WHERE IsDirectlyUsing ASSEMBLY Framework Data AND DeriveFrom App Bas
  • 使用 SQLCipher 加密后无法压缩 Android SQLite 数据库

    我随我的应用程序提供了一个只读数据库 将其包含在 Assets Database 目录中 所有数据均已预先填充 集成后SQLCipher并对数据库进行加密 我注意到 APK 大小从25MB 至 150MB 原因是SQLitedb 文件不再被
  • 用于图像分割的张量流的 sigmoid_cross_entropy 损失函数

    我试图理解什么是sigmoid cross entropy损失函数对于图像分割神经网络的作用 这是相关的 Tensorflow 源码code https github com tensorflow tensorflow blob 600ca
  • 生产环境中显示开发异常

    我知道这是一个很大的 不 并且在我的网站上线时不应该显示开发人员错误页面 我该怎么做才能确保开发环境错误消息不会出现在生产中 为什么会出现这些 我以为在生产模式下它默认是关闭的 我错过了一个设置吗 Note 这是在共享服务器上 我使用的是a
  • ArangoDB - 如何在图遍历中执行计算?

    我有一个简单的图表来跟踪我借钱给的人 所以图表看起来像这样 userB owes to amount 200 gt userA userC owes to amount 150 gt userA 等等 假设您需要使用图形遍历来找出每个用户欠
  • 控件不显示是否在后台线程上运行(c# winform)

    我有一个表格 复杂形式在代码中 具有多个控件 需要一些时间来加载 因此 我决定放入一个单独的线程中 以减少初始加载时间 除了等待表单上的标签控件 Form1在代码中 最初不显示 就在 Form1 响起之前的一瞬间 所以我的问题是 为什么标签
  • QMimeData 中的 Python 对象

    我正在基于我的自定义模型实现拖放 QTreeView 一切正常 我的树显示数据 启用了拖放 现在最后一步就在我面前 放置和传输拖动的数据 为此 我需要在模型中实现 mimeTypes mimeData 和 dropMimeData 方法 现
  • 将多个canvas转换为html5中的dataURL

    我想加入多个画布来制作一个图像 那么有没有什么方法可以将多于一张画布隐藏起来toDataURL制作单个图像 创建一个函数 该函数接受多个参数 画布元素 将它们放在一个空白画布上 然后返回新制作的画布的 dataurl var getImad