Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[How to use] Web deployment: Uncaught UnimplementedError #304

Open
Hengry opened this issue May 16, 2024 · 5 comments
Open

[How to use] Web deployment: Uncaught UnimplementedError #304

Hengry opened this issue May 16, 2024 · 5 comments

Comments

@Hengry
Copy link

Hengry commented May 16, 2024

Platforms

Web

Description

I've read the Web section on README, and I've already added <script src="https://unpkg.com/pica/dist/pica.min.js" ></script> in web/index.html.
It runs well in my local including IOS and also web. But when I built and deployed, it always shows Uncaught UnimplementedError in console.
Did I missed anything?

My code

import 'package:flutter_image_compress/flutter_image_compress.dart';
// ...
final result = await FlutterImageCompress.compressWithList(
  imageBytes,
  minHeight: 768,
);
<!DOCTYPE html>
<html>
  <head>
    <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
    <base href="$FLUTTER_BASE_HREF" />

    <meta charset="UTF-8" />
    <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
    <meta name="description" content="A new Flutter project." />

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="ai_panorama_flutter" />
    <link rel="apple-touch-icon" href="icons/Icon-192.png" />

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png" />

    <title>ai_panorama_flutter</title>
    <link rel="manifest" href="manifest.json" />

    <script>
      // The value below is injected by flutter build, do not touch.
      const serviceWorkerVersion = null;
    </script>
    <!-- This script adds the flutter initialization JS code -->
    <script src="flutter.js" defer></script>
  </head>
  <body>
    <script src="https://unpkg.com/pica/dist/pica.min.js"></script>
    <script>
      window.addEventListener('load', function (ev) {
        // Download main.dart.js
        _flutter.loader.loadEntrypoint({
          serviceWorker: {
            serviceWorkerVersion: serviceWorkerVersion,
          },
          onEntrypointLoaded: function (engineInitializer) {
            engineInitializer.initializeEngine().then(function (appRunner) {
              appRunner.runApp();
            });
          },
        });
      });
    </script>
  </body>
</html>

Try do it

I've tried add <script src="https://unpkg.com/pica/dist/pica.min.js" ></script> on either head or body, also <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pica.min.js" ></script> on either head or body.

But none of them works.
@jrmerril
Copy link

Also having this issue...

@iOSonntag
Copy link

Same here, local it works, once deployed it fails.

@iOSonntag
Copy link

I just found out that my issue was related to brave browser shield, after turning shields down it worked without uncaught exceptions

@NarekManukyan
Copy link

Has anyone found a solution? I have the same problem)

@jrmerril
Copy link

I ended up implementing pica on the web directly instead of using flutter_image_compress for web. Here are some workaround functions I made (my code is messy and implementation of these is also messy):
Future resizeWithList({
required Uint8List buffer,
required int minWidth,
required int minHeight,
CompressFormat format = CompressFormat.jpeg,
int quality = 100,
}) async {
print("Starting resizeWithList");

final Stopwatch stopwatch = Stopwatch()..start();
final imageElement = await convertUint8ListToImageElement(buffer);
print("Image element created");

final srcWidth = imageElement.width!;
final srcHeight = imageElement.height!;

final ratio = srcWidth / srcHeight;
final width = srcWidth > minWidth ? minWidth : srcWidth;
final height = width ~/ ratio;

print("Target size: ${width}x${height}");

// Create an offscreen canvas for resizing
final offscreenCanvas = CanvasElement(width: width, height: height);
final context = offscreenCanvas.context2D;

// Draw the image on the offscreen canvas
context.drawImageScaled(imageElement, 0, 0, width, height);
print("Image drawn on canvas");

// Convert the canvas content to a Blob
final blob = await offscreenCanvas.toBlob(format.type, quality / 100);
final reader = FileReader();
final completer = Completer();

reader.onLoadEnd.listen((_) {
final result = reader.result as String;
final base64String = result.split(',')[1];
final uint8List = base64Decode(base64String);
completer.complete(uint8List);
print("Image conversion complete");
});

reader.readAsDataUrl(blob);

final resizedImage = await completer.future;
logger.jsLog('Compressed image buffer', resizedImage);
logger.dartLog('Compressed image buffer length: ${resizedImage.length}');
logger.dartLog('Compression took ${stopwatch.elapsedMilliseconds}ms');

return resizedImage;
}

Future convertUint8ListToImageElement(Uint8List buffer) async {
final completer = Completer();
final blob = Blob([buffer]);
final url = Url.createObjectUrl(blob);
final image = ImageElement(src: url);

image.onLoad.listen((_) {
Url.revokeObjectUrl(url);
completer.complete(image);
});

image.onError.listen((event) {
Url.revokeObjectUrl(url);
completer.completeError('Image failed to load');
});

return completer.future;
}

extension CompressExt on CompressFormat {
String get type {
switch (this) {
case CompressFormat.jpeg:
return 'image/jpeg';
case CompressFormat.png:
return 'image/png';
case CompressFormat.webp:
return 'image/webp';
case CompressFormat.heic:
return 'image/heic';
case CompressFormat.heif:
return 'image/heif';
default:
return 'image/jpeg';
}
}
}

enum CompressFormat { jpeg, png, webp, heic, heif }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Hengry @NarekManukyan @jrmerril @iOSonntag