toDataURL() export PNG correct,but svg is wrong

[zhucm]

When toDataURL('image/svg+xml') , it's only export part of image,some data lost
version 5.0.2

[UziTech]

Works for me. If you can provide the code that doesn't work I can try to help.

[zhucm]

Hi, &nbsp; Here is part of the code : ...... &nbsp; const ref = React.useRef(); &nbsp; const pad = React.useRef(); ...... &nbsp;&nbsp; React.useEffect(() =&gt; { &nbsp; &nbsp; // resize canvas to full size &nbsp; &nbsp; ref.current.width = ref.current.parentElement.offsetWidth; &nbsp; &nbsp; pad.current = new SignaturePad(ref.current); &nbsp; }, []);&nbsp; ... &nbsp; return ( &nbsp; &nbsp; <div style={{ height: "100%", display: "flex", flexDirection: "column" }}&gt; &nbsp; &nbsp; &nbsp; <InputGroup &nbsp; &nbsp; &nbsp; &nbsp; leftIcon="search" &nbsp; &nbsp; &nbsp; &nbsp; placeholder="搜索..." &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleChange} &nbsp; &nbsp; &nbsp; &nbsp; onKeyPress={handleKeyPress} &nbsp; &nbsp; &nbsp; &nbsp; style={{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marginBottom: "10px", &nbsp; &nbsp; &nbsp; &nbsp; }} &nbsp; &nbsp; &nbsp; /&gt; &nbsp; &nbsp; &nbsp; <TagCloud &nbsp; &nbsp; &nbsp; &nbsp; onSelect={handleSelectChange} &nbsp; &nbsp; &nbsp; &nbsp; tags = {tags} &nbsp; &nbsp; &nbsp; &nbsp; defValue = {'热门短语'} &nbsp; &nbsp; &nbsp; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; <Button onClick={addText} style={{ width: '100%', marginBottom: '5px',marginTop: '5px', }} &gt;添加文字内容</Button&gt; &nbsp; &nbsp; &nbsp; <div&gt; &nbsp; &nbsp; &nbsp; &nbsp; 自由手绘: &nbsp; &nbsp; &nbsp; &nbsp; <canvas &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={ref} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ border: '1px solid grey', borderRadius: '5px' }} &nbsp; &nbsp; &nbsp; &nbsp; /&gt; &nbsp; &nbsp; &nbsp; &nbsp; <div style={{ display: 'flex', justifyContent: 'space-between' }}&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pad.current.clear(); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 清除 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const src = pad.current.toDataURL('image/svg+xml'); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; store.activePage.addElement({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'svg', &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: (store.width-ref.current.width)/2, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: (store.height-ref.current.height)/2, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: ref.current.width, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: ref.current.height, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 添加 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button&gt; &nbsp; &nbsp; &nbsp; &nbsp; </div&gt; &nbsp; &nbsp; &nbsp; </div&gt; ....... Here is the result : zhucm &nbsp;

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "szimek/signature_pad" ***@***.***&gt;; 发送时间:&nbsp;2024年8月20日(星期二) 晚上10:17 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [szimek/signature_pad] toDataURL() export PNG correct,but svg is wrong (Issue #784) Works for me. If you can provide the code that doesn't work I can try to help. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***&gt;

[UziTech]

Could be an issue with DPI see https://github.com/szimek/signature_pad#handling-high-dpi-screens