Last active
October 16, 2020 13:31
-
-
Save hyamamoto/9391477 to your computer and use it in GitHub Desktop.
A Dart snippet for "creating a JPEG image on client-side, then sending it to the server" .
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:crypto/crypto.dart'; | |
| import 'dart:html'; | |
| import 'dart:typed_data'; | |
| void main() { | |
| // Draw an on-memory image. | |
| final CanvasElement canvas = document.createElement('canvas'); | |
| canvas.width = 256; | |
| canvas.height = 256; | |
| CanvasRenderingContext2D context = canvas.getContext('2d'); | |
| final CanvasGradient gradient = context.createLinearGradient(0, 0, 0, canvas.height); | |
| gradient.addColorStop(0, "#1e4877"); | |
| gradient.addColorStop(0.5, "#4584b4"); | |
| context.fillStyle = gradient; | |
| context.fillRect(0, 0, canvas.width, canvas.height); | |
| context.beginPath(); | |
| context.moveTo(10, 10); | |
| context.lineTo(240, 240); | |
| context.lineWidth = 10; | |
| context.strokeStyle = '#ff0000'; | |
| context.stroke(); | |
| // Convert the image to data url | |
| final String dataUrl = canvas.toDataUrl('image/jpeg'); | |
| final String base64Text = dataUrl.split(',')[1]; | |
| final Uint8ClampedList base64Data = new Uint8ClampedList.fromList( CryptoUtils.base64StringToBytes(base64Text)); | |
| // Show an image to send | |
| final DivElement divImage = document.createElement('div') | |
| ..style.width = '256px' | |
| ..style.height = '256px' | |
| ..style.background = 'url(' + canvas.toDataUrl('image/png') + ')'; | |
| document.body.append(divImage); | |
| // Show a base64 encoded data to send | |
| final DivElement divImageAsText = document.createElement('div') | |
| ..text = base64Text; | |
| document.body.append(divImageAsText); | |
| // now Actually send the base64 encoded data. | |
| final HttpRequest request = new HttpRequest(); | |
| request | |
| ..open("POST", 'http://yourdomain.com/postservice') | |
| ..onReadyStateChange.listen((_) { | |
| if (request.readyState == HttpRequest.DONE && | |
| (request.status == 200 || request.status == 0)) { | |
| // data saved OK. | |
| print("onReadyStateChange: " + request.responseText); // output the response from the server | |
| } | |
| }) | |
| ..onError.listen((_) { | |
| print("onError: " + _.toString()); | |
| }) | |
| ..send(base64Data); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Create a JPEG image and send it to the server</title> | |
| </head> | |
| <body> | |
| <script type="application/dart" src="create_jpeg_then_send.dart"></script> | |
| <script src="packages/browser/dart.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:crypto/crypto.dart'; | |
| import 'dart:typed_data'; | |
| import 'dart:io'; | |
| void main() { | |
| // A snippet to decode image 'Base64 encoded string' on server side. | |
| final base64Text = "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"; | |
| final Uint8ClampedList data = new Uint8ClampedList.fromList(CryptoUtils.base64StringToBytes(base64Text)); | |
| final File file = new File("test.jpg") | |
| ..open( mode: FileMode.WRITE) | |
| ..writeAsBytes(data ); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: image_to_data_snippet | |
| description: image to data snippet | |
| dependencies: | |
| crypto: any |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment