Save the Canvas image to the camera roll

Asked 2 years ago, Updated 2 years ago, 97 views

I'm making an application for smartphones with html5.
I'm using Canvas to create an image in the app, and I don't know how to save the image to the iOS camera roll.
(Drawing is done)

Implementation of drawing applications and image storage operations

I was able to save it by referring to this, but the storage directory is not what I want.
(This directory is stored in a sandbox, so you can't see it.)

I tried saving with long tap on InAppBrowser, but I couldn't save with app browser (_blank).
When I set the target to _system to show the browser type as OS dependent, I said, "You are already logged in.Please log out and read the QR code again.

What should I do?Please let me know if you understand.

add
After many attempts, it seems strange to specify base64 (binary?) as the URL of the external link.
I tried it on Blob and others, but the result was the same, and only a similar pop-up appeared.
Is this a specification?

javascript angularjs cordova html5-canvas

2022-09-30 20:10

2 Answers

Please explain a little bit more about why you can't save it.
Have you checked the console such as an error?
Or do you not know how to do it because you have not started it yet?

1. If DataURL cannot be issued
Is the material to be synthesized an external resource?
I think I will use getImageData and toDataURL from Canvas to save it, but
If the Canvas security specification reads resources from a different domain from where the source resides,
SecurityError occurs and cannot be retrieved.

Same-origin policy

Therefore, use FileTransfer to download resources to the outside world and
Why don't you bring it to the same origin and synthesize it?
(Or use the image editing and generation plug-in to operate on the native side…)

2. About how to save
For information on how to save, use the plug-in and
There are two ways to open a browser from DataURL and have users save it.

The plug-in seems to have already appeared, so
(*There are other Plugins like this as well.)
How do I get users to save it?
I think the application I created as the default behavior was that the menu was not displayed by long tap.
(I think it was written around META.)
So the quickest one is window.open(url, '_system').
Wouldn't it be faster to open it with the default browser of the operating system?

However, there is only one caveat:
If the URL is too long, the page will not open automatically.
(*I feel like I got an error in my browser.)
It should have been entered in the URL field, so I think it will be confirmed as user confidence and transitioned.

Same question for Home SO


2022-09-30 20:10

Why don't you use the plug-in below?
https://github.com/quiply/SaveImage

Additional
As is the linked example, use it as follows:

window.cordova.plugins.imagesaver.saveImageToGallery(
    the file path of the image saved in the sandbox,
    onSaveImageSuccess, onSaveImageError);

function onSaveImageSuccess(){
  console.log('------------------- success');
}

function onSaveImageError(error){
  console.log('----------------- error:'+ error);
}


2022-09-30 20:10

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.