search

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.21k stars 1.68k forks source link

toPng() throw error. #455

Open tech-zjf opened 1 year ago

tech-zjf commented 1 year ago

Event { "isTrusted": true, "bubbles": false, "cancelBubble": false, "cancelable": false, "composed": false, "currentTarget": null, "defaultPrevented": false, "eventPhase": 0, "returnValue": true, "srcElement": null, "target": null, "timeStamp": 16799.799999952316, "type": "error" }

image
divyachauhanJio commented 1 year ago

Any solution found for the above ?

forever0714yuan commented 1 year ago

你好，我已收到你的来信。辛苦了！！

guirip commented 1 year ago

Same error here (using html-to-image, forked from dom-to-image)

I noticed the error was occurring because of an img tag with empty src attribute.

e.g <img class="layer" id="film" src="" />

Frederic-DEBOS commented 10 months ago

From my experience, the error rised from bootstrap 4.5 :

image

Copy works when I delete the svg background url. Css code : .custom-select { display: inline-block; width: 100%; height: calc(1.5em + .75rem + 2px); padding: .375rem 1.75rem .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; vertical-align: middle; background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px; border: 1px solid #ced4da; border-radius: .25rem; -webkit-appearance: none; -moz-appearance: none; appearance: none }

shiwenzheng-alt commented 10 months ago

I have also encountered this problem. Has it been solved?

sujiangyin commented 9 months ago

had the same issue，how did you solve it？

sujiangyin commented 9 months ago

Event { "isTrusted": true, "bubbles": false, "cancelBubble": false, "cancelable": false, "composed": false, "currentTarget": null, "defaultPrevented": false, "eventPhase": 0, "returnValue": true, "srcElement": null, "target": null, "timeStamp": 16799.799999952316, "type": "error" } image

had the same issue，how did you solve it？

jianxchen commented 5 months ago

It is normal when there is an external network, but in the absence of an external network environment, the wrong content is reported: Event{isTrusted: true, type: 'error', target: img, currentTarget: img, eventPhase: 2, …}isTrusted: truebubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0path: Array(1)0: imgaccessKey: ""align: ""alt: ""ariaAtomic: nullariaAutoComplete: nullariaBusy: nullariaChecked: nullariaColCount: nullariaColIndex: nullariaColSpan: nullariaCurrent: nullariaDescription: nullariaDisabled: nullariaExpanded: nullariaHasPopup: nullariaHidden: nullariaInvalid: nullariaKeyShortcuts: nullariaLabel: nullariaLevel: nullariaLive: nullariaModal: nullariaMultiLine: nullariaMultiSelectable: nullariaOrientation: nullariaPlaceholder: nullariaPosInSet: nullariaPressed: nullariaReadOnly: nullariaRelevant: nullariaRequired: nullariaRoleDescription: nullariaRowCount: nullariaRowIndex: nullariaRowSpan: nullariaSelected: nullariaSetSize: nullariaSort: nullariaValueMax: nullariaValueMin: nullariaValueNow: nullariaValueText: nullassignedSlot: nullattributeStyleMap: StylePropertyMap {size: 0}attributes: NamedNodeMap {0: src, src: src, length: 1}