exupero / saveSvgAsPng

Save SVGs as PNGs from the browser.
MIT License
1.09k stars 362 forks source link

PhoneGap Usage? #175

Open michaelsboost opened 5 years ago

michaelsboost commented 5 years ago

I haven't had anytime to test it's usage with PhoneGap. Has this been tried yet and if so will it work out of the box?

exupero commented 5 years ago

I have not heard of anyone using this library with PhoneGap. Let me know what you discover and I can update the Readme.

michaelsboost commented 5 years ago

With a little tweaking I got it to work with PhoneGap Desktop/Developer for one of my projects.

However, when I compiled it with PhoneGap Build and ran it through Remote Devices on my desktop I got the following......

Refused to load the image 'data:image/svg+xml;base64,.....' because it violates the following Content Security Policy directive: "default-src * 'unsafe-inline'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

screen shot 2018-05-31 at 10 35 51 pm

I'm not sure how saveSvgAsPng is coded as I went straight to the download part and changed it to save how Android saves. (BTW: I'm using SweetAlert2 for the dialogs)

My app is open source as well which you can view here. It's all client-side based with no ajax so I'm not sure exactly why I got that error yet.

The code I changed...

  out$.download = (name, uri) => {
    if (navigator.msSaveOrOpenBlob) navigator.msSaveOrOpenBlob(uriToBlob(uri), name);
    else {
      // Get access to the file system
      window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
        // Create the file.
        fileSystem.root.getFile(name, { create: true, exclusive: false }, function (entry) {
          // After you save the file, you can access it with this URL
          myFileUrl = entry.toURL();
          entry.createWriter(function(writer) {
            writer.onwriteend = function(evt) {
              swal(
                'Yay!',
                'You\'re character was successfully saved to ' + myFileUrl,
                'success'
              );
            };
            // Write to the file
            writer.write(uri);
          }, function(error) {
            swal(
              'Oops!',
              'Could not create file writer, ' + error.code,
              'error'
            );
          });
        }, function(error) {
          swal(
            'Oops!',
            'Could not create file, ' + error.code,
            'error'
          );
        });
      }, function(evt) {
        swal(
          'Oops!',
          'Could not access file system, ' + evt.target.error.code,
          'error'
        );
      });
    }
  };
michaelsboost commented 5 years ago

With a little change to my html it now saves..... screenshot_20180601-090824

But it appears the image is not readable. screenshot_20180601-091236

exupero commented 5 years ago

Thanks for the info. Can you try saving an SVG instead of a PNG and seeing if that's readable? If not, try transferring it to a desktop OS where you can inspect the text content and see what's wrong. Also, try transferring the PNG to a desktop OS and see if it's readable, just in case it's a limitation on a mobile device. You can also try getting the data URIs to either the SVG or PNG and opening it in a browser to see if you get any indication of the problem.

michaelsboost commented 5 years ago

Saving as svg works fine. I ran the datauri in console and that works fine, on desktop no issues just phonegap. Not sure why the image is not readable when it opens fine in a browser tab.