how can i use this lib without "webpack" and "npm" in pure javascript inline
insinfo opened this issue · comments
how can i use this lib without "webpack" and "npm".
I have fav many AngularDart projects and in dart I can call javascript functions, but I don't know how to put this lib in my index.html as I do with other libs like "mapbox"
index.html
<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<script>
function loadMap(selectorId, latitude, longitude, zoom, markerText, accessToken) {
mapboxgl.accessToken = accessToken;
var map = new mapboxgl.Map({
container: selectorId,
style: 'mapbox://styles/mapbox/streets-v11',
center: [longitude, latitude], // starting position [lng, lat]
zoom: zoom // starting zoom
});
var popup = new mapboxgl.Popup({ offset: 25 }).setText(
markerText
);
var popup = new mapboxgl.Popup({ closeOnClick: true })
.setLngLat([longitude, latitude])
.setText(markerText)
.addTo(map);
var marker = new mapboxgl.Marker({
}).setLngLat([longitude, latitude])
.addTo(map);
}
</script>
<script defer src="main.dart.js"></script>from dart code
//wrapper interop dart <=> js
@JS()
library mapbox;
@JS('loadMap')
external void loadMap( dynamic id, double latitude, double longitude, double zoom, String markerText, String accessToken);
//execute
loadMap(htmlElement, -22, -40, 14, 'test', 'asdasdsad-asdad');
Please, avoid generic programming questions. See demo sources as example of use without bundler https://github.com/nodeca/pica/tree/gh-pages/demo
@puzrin
thanks for the reply
thanks for the answer, through the link I managed to make the resizing to a Canvas element work, but how do I pass an "ArrayBuffer" from a jpeg file that I have in memory to the pico lib for it to resize and return an "ArrayBuffer" already resized
on dart I use this code below to read the JPG file from an input file element and return me the ArrayBuffer
<input (change)="handleFileUpload($event.target.files)" type="file" class="">
void handleFileUpload(html.FileList files) {
var file = files[0];
var fileBytes = await fileToArrayBuffer(file);
//here I need to pass this arrayBuffer to lib pico and it returns an arrayBuffer of the resized image
}
static Future<dynamic> fileToArrayBuffer(html.File file) async {
final completer = Completer();
final reader = html.FileReader();
reader.onLoad.listen((progressEvent) {
final loadedFile = progressEvent.currentTarget as html.FileReader;
completer.complete(loadedFile.result);
});
reader.readAsArrayBuffer(file);
return completer.future;
}How to do this optimally so you don't have to keep creating Canva elements
https://github.com/nodeca/pica#pica---high-quality-image-resize-in-browser
Note. If you need File/Blob resize (from form's file input), consider use image-blob-reduce. It has additional machinery to process orientation, keep EXIF metadata and so on.
Is this what you asking about?
@puzrin
Thanks for the feedback, I managed to make it work with pure javascript without webpack/npm.
It would be interesting if you had a parameter in this "toBlob" function that you could pass the quality of the JPEG compression, and it would also be interesting if you could also pass an ArrayBuffer/Uint8Array instead of a Blob.
I implemented a workaround for this by creating a lib in rust to resize and process images, just passing in a Uint8Array:
my lib rust/wasm test
let buf = await fetch("original.jpeg", { referrer: "" }).then(r => r.arrayBuffer()); // huge jpg
//process resize ArrayBuffer of image file
let array = photon.resize_image_from_uint8array(new Uint8Array(buf), 1024, 1024, 80);
downloadBlob(array, 'some-file.jpg', 'image/jpeg');https://github.com/insinfo/photon-lib
my code for test of image-blob-reduce.
<!DOCTYPE html>
<html>
<head>
<title>teste</title>
<script src="dist/image-blob-reduce.js"></script>
<script>
var downloadBlob, downloadURL;
downloadBlob = function (data, fileName, mimeType) {
var blob, url;
blob = new Blob([data], {
type: mimeType
});
url = window.URL.createObjectURL(blob);
downloadURL(url, fileName);
setTimeout(function () {
return window.URL.revokeObjectURL(url);
}, 1000);
};
downloadURL = function (data, fileName) {
var a;
a = document.createElement('a');
a.href = data;
a.download = fileName;
document.body.appendChild(a);
a.style = 'display: none';
a.click();
a.remove();
};
async function readFileAsArrayBuffer(file) {
let result_base64 = await new Promise((resolve) => {
let fileReader = new FileReader();
fileReader.onload = (e) => resolve(fileReader.result);
fileReader.readAsArrayBuffer(file);
});
return result_base64;
}
window.onload = function (e) {
var inputFile = document.getElementById('file');
inputFile.onchange = async function (e) {
let t1 = performance.now();
var file = inputFile.files[0];
var buf = await readFileAsArrayBuffer(file);
var image_blob = new Blob([buf], {
type: file.type
});
var api = ImageBlobReduce();
api.toBlob(image_blob, { max: 1000 })
.then(blob => {
url = window.URL.createObjectURL(blob);
downloadURL(url, 'some-file.jpg');
console.log(performance.now() - t1);
});
}
};
</script>
</head>
<body>
<h1>test</h1>
<input type="file" id="file"><br>
</body>
</html>