Skip to content

Instantly share code, notes, and snippets.

@hyamamoto

hyamamoto/create_jpeg_then_send.dart

Last active October 16, 2020 13:31
Show Gist options
  • Save hyamamoto/9391477 to your computer and use it in GitHub Desktop.
Save hyamamoto/9391477 to your computer and use it in GitHub Desktop.
Download ZIP
A Dart snippet for "creating a JPEG image on client-side, then sending it to the server" .
Raw
create_jpeg_then_send.dart
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);
}
Raw
create_jpeg_then_send.html
<!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>
Raw
decode_base64_as_jpeg.dart
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 );
}
Raw
pubspec.yaml
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