canvas.toDataURL() 无法正常工作[重复]

2023-12-19

我有一个画布,我在其中上传图像,代码如下:

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

现在我想用canvas.toDataURL()将图像加载到另一个画布。代码是:

var dataURL = canvas.toDataURL();
drawDataURIOnCanvas(dataURL,canvas2);

    function drawDataURIOnCanvas(dataURL, name_of_canvas) {

    var myCanvas = document.getElementById(name_of_canvas);
    var img3 = new Image;
    var ctx2 = myCanvas .getContext('2d');
    img3.onload = function(){
       ctx2.drawImage(img3,0,0); // Or at whatever offset you like
    };
    img3.src = dataURL;
}

如果我给它一个工作网址,一切都很好。但是我尝试过的任何图片生成的网址都是

数据:图像/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=。

如果您尝试使用它,它不会生成画布中飞机的照片。我该如何使用该功能toDataURL在另一块画布上绘制图像?


您可以查看使用示例HTMLCanvasElement.toDataURL() https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL在developer.mozilla.org

toDataURL返回有效的 Base64 编码图像。所以问题是如何将此图像分配给第二个画布。

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

canvas.toDataURL() 无法正常工作[重复] 的相关文章

  • 使用 moment.js 检查输入日期是否为星期一

    好吧 我想检查日期是否是星期一 例如 var myDate new Date moment myDate DD MM YYYY dayIs monday 在我的国家 一周的第一天是星期一 所以 我真的想检查输入日期是否是一周的开始 我尝试使
  • jQuery 选择 # id 以单词为前缀,计数器为后缀

    有没有办法用 jQuery 选择所有带有前缀 my 和后缀 0 9 的 id 像这样的 my 1 4 还是可以用循环来实现 div div div div div div div div div div 第一个想法 似乎效果很好 div i
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • 如何延迟加载嵌入在 iframe 上的 YouTube 视频?

    如何将延迟加载应用于iframe嵌入视频 我尝试添加loading eager loading auto and loading lazyload 您可以使用srcdoc你里面的属性iframe标签来加载图像 请参阅以下示例作为参考
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 如何使JavaScript函数在Eclipse“大纲视图”中可见?

    我有这样的代码 但如果它在匿名函数中定义 则无法打开函数大纲 类没有问题 我该如何概述something2 请分享一些提示 我可以将所有函数标记为构造函数 但这是无效的方法 start of track event required deb
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • 将 javascript 整数转换为字节数组并返回

    function intFromBytes x var val 0 for var i 0 i lt x length i val x i if i lt x length 1 val val lt lt 8 return val func
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • 如何在jquery中获取保存时间和当前时间的差异?

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201
  • JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

    我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • 类型映射资源以及将列表转换为向量(以及反之)

    我正在使用 SWIG 将 c 包装在 python 中 并且需要使用类型映射以使我的 python 脚本尽可能简单 作为第一次尝试 我只是发送 2 个列表 将它们转换为向量 将两个向量相加 然后将结果返回到新列表中 我的问题是 我发现 SW
  • 使用 c++ 17 更新时 G++ 编译器警告

    我正在 Windows 10 上使用 mingw 运行 g 编译器 在 cmd 中检查编译器版本时 我得到以下信息 g version g MinGW org GCC Build 2 9 2 0 与c version 当我使用结构化绑定编译
  • jQuery 未在附加项目上触发

    我在触发已添加到页面的项目上的事件时遇到问题 在以下示例中 如果单击 X 它将删除其中一项 但如果添加一项 则无法将其删除 清单如下 ul li Item 1 a class remove X a li li Item 2 a class
  • 如何对齐 2 个反应原生元素,1 个位于中心,1 个位于开头

    假设我们有这些反应原生样式 var styles StyleSheet create parentView width 400 height 150 containerView flex 1 flexDirection row alignI
  • 每当 SwiftUI 中更新 CoreData 时更新状态变量

    从 CoreData 更新一些数据后 我还想更新一个State 可变为返回结果的数量 当CoreData改变时 Stepper应始终设置为返回结果的数量 然而 onAppear当我使用时也会发生火灾Stepper 我怎样才能办理登机手续on
  • 如何在ListView上使用Button的onClickListener方法

    我有一个习惯ListView其中包含一个Button 该按钮的功能是删除按钮 每当用户单击此按钮时 当前行将被删除 我该怎么做 我该如何设置onClickListener对于这个按钮 如何捕获该按钮所在的行 ID 提前致谢 In your
  • SAM Local 似乎没有运行授权者功能

    我刚刚开始使用SAM 本地 https github com thoeni aws sam local 但在尝试为我的端点配置授权者功能时遇到了问题 我一直在看主要 SAM 文档 https github com awslabs serve
  • 引用的错误类型不是注释类型:

    我得到了以下方面 Around execution public DisabledForBlockedAccounts annotation denyForTeam public Object translateExceptionsDeny
  • 在jsFiddle中引用GitHub文件

    是否有可能滥用从github存储库中获取文件作为jsFiddle中的外部资源 TLDR Visit rawgit com http rawgit com 这将直接从 GitHub 将您的文件弹出到 CDN 上 以便您可以使用它们 不幸的是
  • 模拟 6502 个时钟周期的最佳方法?

    我一直在研究 NES 模拟器的 CPU 我想知道管理多周期指令周期的最佳方法是什么 假设实现了一个周期的时间延迟 我可以根据指令的每个步骤单独增加周期 如下所示 void EXAMPLE INSTRUCTION step1 cycles s
  • 对形状内的元素进行聚类

    我见过这个解决方案 http jsfiddle net srvikram13 CLs8P 它似乎负责在 一致 形状内对元素进行聚类 而不会重叠 但是如果形状更加模糊怎么办 如下所示 我的前几次尝试似乎是将形状简化为其最基本的形式 然后检查元
  • 通过 setuptools 在 PyPi 上发布作者的正确方法

    我目前使用setuptools构建我的 Python 包 我已经在我的文件中以这种方式声明了两位作者pyproject toml file authors name X Y email email protected cdn cgi l e
  • iOS WebApp 不显示启动图像

    I added 在我网站的 head 标签之间 但它不适用于启动图像 这是正常的吗 您是否尝试在桌面浏览器中查看启动图像 如果是这样 那么我会在 IOS 移动设备上访问您的网站并将该应用程序添加到您的主屏幕 当您打开它时 您应该会看到启动屏
  • 错误 A2070:指令操作数无效

    错误位于 AfterLoop skope 行 mov esi edi 中 我该如何解决这个问题 节点删除函数 headptr nodeToremove removeNode proc headPtr 8 nodeToRemove headP
  • 改造 OKHTTP 离线缓存不起作用

    我阅读了数十个教程和 Stackoverflow 来解决我的问题 但没有任何效果对我有用 而且 它们中的大多数都很旧 所以 OKHTTP 可能以某种方式发生了变化 我想要的只是启用离线缓存用于改造 我正在使用 GET 我尝试仅使用offli
  • AWS Elastic Beanstalk 运行 Grunt 任务

    我想在 elastic beanstalk 上运行 node js 应用程序 我有一个客户端 它是通过繁琐的工作 jade less concat 等 构建的 我从 git 中排除了这个文件夹 我可以在本地运行这个grunt buildCl
  • 在发布到 AWS S3 之前,如何压缩/gzip 我的 mimified .js 和 .css 文件?

    我运行了 Google pagespeed 它建议压缩我的 js 和 css 消除首屏内容中阻碍渲染的 JavaScript 和 CSS 显示如何修复 Enable compression Compressing resources wit
  • tableView:cellForRowAtIndexPath 删除项目后以 nil indexPath 调用

    我有一个相当香草的UITableView由一个管理NSFetchedResultsController显示给定核心数据实体的所有实例 当用户通过滑动删除表视图中的条目时 tableView cellForRowAtIndexPath 最终被
  • 安装性能计数器的 Total 实例

    VS 2005 C 2 0 NET 2 0 3 0 Win2003 我正在尝试为多实例安装一组性能计数器 我注意到一些系统性能计数器类别设法保持 total 即使没有其他实例 也仍然存在 ASP NET Apps 2 0 50727 就是一
  • canvas.toDataURL() 无法正常工作[重复]

    这个问题在这里已经有答案了 我有一个画布 我在其中上传图像 代码如下 function handleImage e var reader new FileReader reader onload function event var img