dom-to-image 相关问题


React-Pixi 入口/react-pixi 中的屏蔽

我用于精灵的图像比所需的大得多(910px)。我需要动态更改容器的高度,遮盖图像。 有谁知道如何做到这一点? 我用于精灵的图像比所需的大得多(910 像素)。我需要动态更改容器的高度,遮盖图像。 有人知道该怎么做吗? <Container x={x} y={y} width={width} height={height}> <Sprite image={image} anchor={[0, 0]} x={0} y={0} width={width} height={910} rotation={0} /> </Container> @inlet/react-pixi: "^1.1.9" pixi.js: "^5.2.0" react: "^16.12.0" react-dom: "^16.12.0" 不幸的是,这也不起作用,因为纹理保持静态,而矩形四处移动 <Graphics draw={(g) => { g.clear() const texture = new PIXI.Texture.from(image) g.beginTextureFill(texture) g.drawRect(x, y, width, height) g.endFill() }} /> 试试这个: const maskRef = useRef() <Container mask={maskRef?.current} x={x} y={y} width={width} height={height}> <Graphics name="mask" draw={React.useCallback( (g) => { g.beginFill(0x000000) g.drawRect(0, 0, size.width + 3, size.height + 3) g.endFill() }, [width, height] )} ref={maskRef} /> <Sprite image={image} anchor={[0, 0]} x={0} y={0} width={width} height={910} rotation={0} /> </Container> 官方文档位于此处,解释其工作原理和局限性


使用 qr-image 生成 Wi-Fi QRCode

npm 模块 qr-image 允许使用 NodeJS 生成 QRCode,如下所示: 从“qr-image”导入 qr; 从 'fs' 导入 fs; qr.image('https://google.com/search?q=hello%20world!', {type:'...


NextJS 中 useFormStatus() 始终为 false

我尝试使用 useFormStatus() 在提交表单并等待获取数据时动态更改 UI。 我有一个像这样的表单组件 函数 onSubmit(数据:z.infer 我正在尝试使用 useFormStatus() 在提交表单并等待获取数据时动态更改 UI。 我有一个像这样的表单组件 function onSubmit(data: z.infer<typeof FormSchema>) { requestImg(data).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const imageBase64 = URL.createObjectURL( new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */) ); setOpen(true); setSource(imageBase64); }); } if (isDesktop) { return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6" > ... 其中 requestImg(data) 是服务器操作。 然后,我将 Button 组件嵌套在不同的 Button.tsx 文件中的 <form> 中 import { useFormStatus } from "react-dom"; import { Button } from "@/components/ui/button"; export default function ButtonSub() { const { pending } = useFormStatus(); console.log(pending); return ( <Button className="w-full" type="submit" aria-disabled={pending}> {pending ? "Processing..." : "Submit"} </Button> ); } 问题是,当我单击提交时,按钮文本不会更改为“正在处理...” 编辑 似乎仅当您在表单上使用操作关键字时才有效。我试过了 <form action={async (formData: FormData) => { requestImg(formData).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const imageBase64 = URL.createObjectURL( new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */) ); setSource(imageBase64); setOpen(true); }); }} className="w-2/3 space-y-6" > 但是现在使用 byte8Array 生成的图像已损坏。 我有一个带有动态 src 的图像,其中充满了 const [source, setSource] = useState(""); <img src={source}/> 似乎只有在您使用 action 关键字时才有效 形式。 确实如此。 useFormStatus 必须在表单的子组件内使用,它可以监视服务器操作的状态变化。但据我所知,它会监听 action。 action 定义提交后表单数据的服务器端目的地。在服务器操作的上下文中,服务器操作向当前 URL 发出 post 请求。所以它没有监听表单 onSubmit,这就是为什么你的第一个代码执行不起作用。 现在服务器操作在服务器上下文中运行,它们在服务器上执行,但setState是客户端特定的代码


Dom 内容未在 Chrome 扩展清单版本 3 中加载

我正在尝试在清单版本 3 中创建 Chrome 扩展, 我想从 Chrome 扩展中的 Dom 中抓取数据。当我加载 chrome 扩展 Dom 时未加载,因此无法爬行,af...


使用批处理脚本重命名多个文件

我有很多这种格式的文件: D:\images\AAA_BBB\image\whatever1.jpg D:\images\AAA_BBB\image\whatever2.jpg D:\images\FFF_EEE_CCC\图像 sdf1.jpg D:\images\FFF_EEE_CCC\图像 sdf2.jpg D:\我...


nuxt 3 中的 nuxt/image 模块导致生产出现问题

使用 Nuxt/Image 模块并构建应用程序时,图像 URL 将更改为 https://domain.x/_ipx/_/images/foods/Appetizaer/Garlic-Bread.png。然而,图像不能被看...



无法访问“<init>”:它在“Image”中是包私有的

Android studio,我想用内置方法“Image”发布一个简单的图像。编译器抛出了我在标题中发布的内容。 我正在尝试不同的图像选项和 ImageView 没有


使用 PHP 简单 HTML DOM 解析器选择类或 id 时卡住了

我尝试使用 PHP Simple HTML DOM Parser 选择一个类或一个 id,但完全没有运气。我的例子很简单,似乎符合手册中给出的例子(http://


如何使用 Angular 更改 Shadow DOM 中嵌套子元素的样式

我想更改包装在父元素内部的子元素的字体样式,该父元素在内部被其他元素包装,最后它被包含在影子根内。附加 DOM ...


运行单元测试时无法检测到已安装的react-router-dom包

我想用react-router-dom学习react测试库。我使用 npx create-react-app 命令创建了该应用程序。生成的代码在父文件夹中已经有一个 App.test.js: 导入{渲染,


从react-native-image-crop-picker录制视频在android 13 - Tab(三星Galaxy Tab A8)中不起作用

我在我的react-native应用程序中使用react-native-image-crop-picker并从Android中的相机录制视频它正在返回[错误:用户取消了图像选择] 笔记: 它正在工作...


React Native 图像选择器不工作:任务:react-native-image-picker:compileDebugJavaWithJavac 失败

我一直在尝试将react-native-image-picker集成到我的React Native Android应用程序中,但是在按照设置说明进行操作后我遇到了问题。该应用程序无法正确加载图像选择器...


将嵌套元素放入 ng-content

我尝试用一个获得所有。 一个 直接位于父元素的根 DOM 中,另一个位于 内部 帕...


一个js函数调用多个html canvas的draw和drawImage方法可以保存到单个Image对象中吗?

一个js函数调用多个html canvas的draw和drawImage方法可以保存到单个Image对象中吗? 一直在寻找一种方法来做到这一点。我正在考虑利用 html canvas cli...


canvas drawImage() 渲染 Font Awesome 图标

我需要使用画布drawImage()渲染字体很棒的图像。 drawImage 接受图像参数: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#image 一个元素...


Typescript、React、强类型 useHistory

我将 useHistory (react-router-dom) 变量作为参数发送到employee.service,其中我使用带有状态和路径名的“history.push”方法。不幸的是我不能...


org.apache.commons.logging.LogFactory 在构建时无意中初始化了

我正在使用 GraalVM 21、JDK 21、Ubuntu 22.04 LTS # 在 Ubuntu 22.04 操作系统 (WSL 2) 上 chmod +x mvnw ./mvnw -Pnative spring-boot:build-image 日志 [信息] [创建者] - '-H:+


为什么Python的Tkinter Image函数无法定位PNG文件?

回溯(最近一次调用最后一次): 文件“c:\Users\####\Desktop\Python_Demo_Projects\Quiz_Program\problematic.py”,第 51 行,位于 上一张幻灯片() 文件“c:\Users\#...


为什么我导入 React 时服务器返回 MIME 类型为“text/html”?

这是我的js: 从'./node_modules/react'导入React; 从'./node_modules/react-dom'导入ReactDOM; 让 thePage = React.createElement( '主要的', 无效的, '哈哈' ); ReactDOM.render(thePage,


jq 如何获取特定孩子的所有父母

您好,我有以下 json 并尝试获取所有拥有“linux-image-amd64”的父母 { "web-prode-01.example.de": "错误:安装软件包时遇到问题。


jq 如何获取特定孩子的所有父母

您好,我有以下 json 并尝试获取所有拥有“linux-image-amd64”的父母 { "web-prode-01.example.de": "错误:安装软件包时遇到问题。


在React.js中使用renderToString使用express启用服务器端渲染时出错

这是我的服务器/server.js: 从“快递”进口快递; 从“反应”导入反应; 从 'react-dom/server' 导入 ReactDOMServer, { renderToString }; 从 '.....


Astro.js <Image>组件问题

我正在使用 Astro (v.4.0.8) 开发一个应用程序,我遇到了一个无法解决的问题。我想渲染图像并导入特定的 svg 以及来自 '... 的


无法在 Next JS 中显示来自 FastAPI 的 blob 图像

所以我有自己的使用 FastAPI 构建的 API,它返回一个图像 返回响应(内容= img_byte_arr.getvalue(),media_type =“image / jpeg”) FastAPI Swagger 中一切正常...


如何使用DomDocument通过id获取值?

我正在尝试使用 DomDocument 获取下面表单的值,但到目前为止仍然失败 我正在尝试使用 DomDocument 获取下面表单的值,但到目前为止仍然失败 <?php $string ='<form action="profile" method="post" enctype="multipart/form-data"> <input type="hidden" name="id_user" id="id_user" value="123"> <input type="hidden" name="logo" id="logo" value="path/to/logo1.png"> <input type="hidden" name="status" id="status" value="Ok"> <input type="submit" value="PROFILE"> </form>'; ?> 这种情况下如何正确使用DomDocument? 我正在尝试下面的代码 $dom = new DomDocument(); $dom->loadHTML($string); $dom->getElementById("id_user"); 我期望得到 123 作为返回值 DomDocument 有点麻烦,但如果您遵循文档,您就可以到达那里。我找到了这条路线: $dom->getElementById("id_user")->attributes->getNamedItem("value")->value 返回: 123 参见:https://onlinephp.io/c/c37dc 可能还有其他方法可以做到同样的事情。


多次执行fetch

我已经构建了一个javascript函数来创建一个项目(=图片+标题+类别) 使用使用 fetch 的 API。 API响应后,我修改DOM以显示新的项目列表。 初始化...


反应单元测试“不是函数”对象。<anonymous>

努力为使用 redux/sagas 的文件编写一些单元测试。 app.tsx 文件看起来像这样 从 'react' 导入 React, { StrictMode } 从'react-dom'导入ReactDOM 导入 { Provider } f...


链接点击时的反应模式调用

使用react-modal,我需要通过锚标记或react-router-dom链接单击超链接时显示模式。 示例:单击注册超链接,注册表模式应打开。


完整显示远程页面内容

我需要获取远程页面,修改一些元素(使用“PHP Simple HTML DOM Parser”库)并输出修改后的内容。 远程页面存在问题,其中没有完整的 URL


PHP - 完整显示远程页面的内容

我需要获取远程页面,修改一些元素(使用“PHP Simple HTML DOM Parser”库)并输出修改后的内容。 没有完整 URL 的远程页面存在问题...


使用 CLI 导入 Apache Superset 问题

我正在使用 docker image 运行 apache superset 实例,UI 工作正常,我已成功创建数据源和仪表板,然后将其导出为 zip 文件。 我的问题是每当我尝试...


React Native 展会图像缓存键功能

我正在尝试将 expo-image 包与预签名的 S3 图像一起使用。但是,即使我之前已经加载过图像,加载图像也需要几秒钟的时间。由于...


Docker Image 不会在 Azure DevOps 中构建,但会在 Visual Studio 2022 中构建

这是我使用 Visual Studio 2022 创建的 dockerfile: #请参阅 https://aka.ms/customizecontainer 了解如何自定义调试容器以及 Visual Studio 如何使用此 Dockerfile 来构建...


如何为与其容器比例不同的图像创建平移和缩放效果?

我有以下简单的代码来平移和缩放图像(从[此处]稍作修改:(https://www.cssscript.com/image-zoom-hover-effect/) 函数 imageZoom(容器, img) { 反对...


如何在不重新加载页面的情况下发送带有文件的表单?

我尝试在ajax中发送表单而不重新加载页面,但我看到,文件上的链接不存在...... 我有下一个表格: 我尝试在ajax中发送表单而不重新加载页面,但我看到,文件上的链接不存在... 我有下一个表格: <form id="settings" method="POST" enctype="multipart/form-data"> ... <input type="file" id="logo" style="display:none;" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">save</button> </form> Ajax 脚本: $('#settings').submit(function(e){ e.preventDefault(); var form = $(this).serialize(); alert(form); // file is not attached... $.ajax({ url : '/settings', type : 'POST', crossDomain : false, data : form, contentType : 'multipart/form-data', dataType : 'json', progressData: false, cache : false, success : function(r){ alert (111); } }).fail(function(){ console.log('Error occured!'); }); }); 在服务器端,我收到错误: org.apache.tomcat.util.http.fileupload.FileUploadException:请求被拒绝,因为未找到多部分边界 我尝试不序列化表单,而是写了 data : form -> data : new FormData(this) 此选项会导致错误“非法调用”。如何在不重新加载页面的情况下发送带有文件的表单? 要使用 AJAX 发送带有文件的表单而不重新加载页面,您需要使用 FormData 来正确处理文件上传。 <form id="settings" method="POST" enctype="multipart/form-data"> <!-- Other form fields --> <input type="file" id="logo" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">Save</button> </form> $(document).ready(function() { $('#settings').submit(function(e){ e.preventDefault(); var formData = new FormData(this); $.ajax({ url: '/settings', type: 'POST', data: formData, contentType: false, processData: false, cache: false, success: function(response){ alert('Form submitted successfully!'); // Handle the response from the server }, error: function(){ console.log('Error occurred!'); } }); }); });


有没有一种方法可以在React中单击时嵌入链接来重定向组件?

我有一个导航栏,其路线设置如下: 导入'../styles/Nav.css' 从 'react-router-dom' 导入 { BrowserRouter as Router, Routes, Route, Link} 从 '../components/Home' 导入 { Home }


jquery 滚动到 data-image-id

我无法在包含各种图像的 div 容器上设置 id,但想要创建一个带有指向图库各个部分的跳转链接的导航。 在我的图像上设置的一个元素


html2canvas 生成的图像与 DOM 非常不同

我遇到了 html2canvas 无法准确呈现节点显示方式的问题。我知道它对 CSS 属性的支持有限,我们在这里使用转换属性。有没有人知道...


反应问题,当我将标头组件添加到我的主页组件时,没有任何内容加载

从“react”导入React; 从 '@chakra-ui/react' 导入 { ChakraProvider, CSSReset }; 从 'react-router-dom' 导入 { BrowserRouter as Router, Route, Routes }; 从 './nav' 导入导航; 导入首页


GStreamer。如何更改v4l2src图像分辨率?

有管道: v4l2src !解码器!队列 !视频转换! xv图像接收器 启动 v4l2src 后,发现许多具有媒体类型 image/jpeg 和不同图像分辨率的大写字母。 v4l2src 选择第一个...


使用 MLKit 进行图像到位图转换返回 null

我在 Android 中,正在尝试将 Image 类型的对象转换为 Bitmap,以便将其附加到 Canvas 对象(Canvas 需要位图)。我转换为 InputImage,然后尝试从中获取位图。但是


MazPhoneNumberInput Vue.js 上的自动对焦

我在表单中使用 MazPhoneNumberInput 组件(https://maz-ui.com/components/maz-phone-number-input): 我正在以这种方式使用 MazPhoneNumberInput 组件(https://maz-ui.com/components/maz-phone-number-input): <MazPhoneNumberInput v-model="phoneNumber" v-model:country-code="countryCode" show-code-on-list :preferred-countries="['DE', 'US', 'GB']" noFlags /> 并且想在手机输入上设置自动对焦。 MazPhoneNumberInput 组件本身没有 autofocus 属性,但它基于具有 autofocus 属性的 MazInput 组件(https://maz-ui.com/components/maz-input): 我尝试通过 javascript 使用 onMounted 方法设置焦点: import AppLayout from "@/Layouts/Auth/AppLayout.vue"; import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput' import {ref, onMounted} from 'vue' const phoneNumber = ref() const countryCode = ref('DE') const focusInput = () => { phoneNumber.value.focus(); }; onMounted(focusInput); 但是没有成功。 如何在手机输入上设置自动对焦? 这可以使用 template ref 来完成,它可以访问组件的 DOM 元素。由于根元素只是多个其他元素的包装,因此需要额外的查询来获取实际的电话输入,然后您可以将其聚焦: onMounted(async () => { const phoneEl = phone.value.$el // MazPhoneNumberInput root DOM element const phoneInput = phoneEl.querySelector('input[type=tel]') // inner input DOM element await nextTick() // can focus after next DOM update phoneInput.focus() })


致命错误C1034:stdio.h:未指定包含文件的搜索路径。 GraalVM Native Image 没有编译我的项目

GraalVM 没有编译我的项目,我尝试了以下方法: PS D:\Documents\Intellij Idea Projects\Project> ./gradlew.bat nativeRun 配置项目: 项目:=>“com.user.Project”Java 模块 任务:


创建新的 React 应用程序时遇到麻烦

当我尝试创建一个新的 React 应用程序时,我收到以下错误消息, 安装软件包。这可能需要几分钟。安装中 React、react-dom 和带有 cra-temp 的 React-scripts...


如何使最新的 Angular 版本与旧浏览器兼容?

Angular 在其文档中声明,它与所有主要浏览器的 2 个最新版本(以及 Firefox 的最新+ESR)兼容。由于 Angular 在底层使用标准 DOM API,因此它应该...


如何缩放.png?

我正在制作一个网站,但我的徽标是 PNG 格式,因为它是像素艺术。我正在使用 CSS 行 image-rendering: Pixelated;在我的徽标图像上,但我还没有看到它在某些情况下是可靠的。 SVG


VB6 迁移 - Windows Server 2019 上的图标显示为黑色轮廓

我正在迁移使用 ImageList 和 Image 控件来显示图标的 VB6 应用程序。该应用程序在 Windows Server 2008 R2 上运行正常,但是当我在 Windows Server 20 上运行它时...


什么在 Next.js next/navigation 中的react-router-dom 中替换 useLocation() ?

最近,我从 React 迁移到 Next.js [email protected]。在我的网站中,我在使用 useNavigate() 推送时使用了状态,并使用 useLocation() 从另一个页面获取值。我怎样才能做同样的事...


如何从与调用者相同的分支触发依赖工作流

假设我有一个这样的工作流程文件: 名称:部署映像 在: 工作流程_运行: 工作流程:[“构建图像”] 类型: - 完全的 因此,当 build-image 完成后,deploy-i...


© www.soinside.com 2019 - 2024. All rights reserved.