Background Image lost while converting `toData` and back with `fromData` ("undo" operation)
nikhil478 opened this issue · comments
i was trying to render image in background of canvas by using canvas .fromDataUrl()
func it is properly working
after using pen on canvas i want a option to revert last operation
so what i am trying to do is basically converting canvasObject to Data array and pop and then back to canvasObject code was something like this
undoCanvas = () => {
let data = canvasRef.toData();
if (data.length > 0) {
data.pop();
}
canvasRef.fromData(data);
}
upstream issue, not specific to react-signature-canvas
Per this project's description, react-signature-canvas
is merely a wrapper component around signature_pad
.
Any activity that uses the ref
is behavior that is provided by signature_pad
and not specific to react-signature-canvas
.
So your issue belongs upstream in signature_pad
's repo, and not here.
support request, not a bug
That being said, this does not seem like a bug and seems more like a support request. GitHub issues are mostly for bug reports. I can attempt to answer, but please recognize that I am a volunteer and am not paid to answer support questions (or maintain this library at all, for that matter).
StackOverflow may be a better platform for such a question. signature_pad
also has GitHub Discussions open that may be better suited for this type of request.
try CSS background-image
instead
toData
only returns the point and curve information of your drawing ("pen"). That contains detailed, SVG-like vector data of for each click, drag, etc.
fromDataUrl
, on the other hand, inserts a raster image onto the canvas. It's a single image; the dataUrl is merely a blob, and does not contain detailed point+curve information. This is briefly mentioned in signature_pad
's docs in the example comments.
So data
and dataUrl
are distinct entities effectively, storing two different forms of information -- point+curve data vs. a blob of the whole canvas.
So if you want to use a background image, I might suggest an alternative method. For instance, as I recommended in #60 (comment), you could use the CSS background-image
property instead.
This would have the benefit of being independent of and untied to the point+curve data, it'll just be consistently there.
@agilgur5 thanks for assistance and taking the time to help me !