Skip to content

Instantly share code, notes, and snippets.

{
"application_id":"YOUR_APP_ID",
"src":"http://cdn.blitline.com/filters/boys.jpeg",
"functions":[
{
"name":"convert_command",
"params":{
"-function":"polynomial 3.5,-5.05,2.05,0.3",
"-channel":"R"
},
@psbolden
psbolden / scale.html
Created May 26, 2017 15:28
Scale Image to fit on canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<canvas id='cv'></canvas>
<button id='other'>other image</button>
// use jQuery shipped with Uploadcare
$ = uploadcare.jQuery;
var widget = uploadcare.MultipleWidget('input');
// disable submit button
$('#submit').attr('disabled', true);
widget.onUploadComplete(function(info) {
// upload is complete
console.log(info);
@psbolden
psbolden / gist:51a418f50ed68b612236b9bca2da6c46
Created April 23, 2017 14:10
Blitline image grid / collage
{
"application_id":"YOUR_APP_ID",
"src":"https://s3.amazonaws.com/img.blitline/skysmall.jpg",
"functions":[
{
"name":"image_grid",
"params":{
"images": [
"https://s3.amazonaws.com/img.blitline/skysmall.jpg",
"https://unsplash.it/200/300/?random",
source: http://stackoverflow.com/questions/13990673/upload-canvas-data-to-s3
var canvas = document.getElementById("imagePreviewChatFooter");
var dataUrl = canvas.toDataURL("image/jpeg");
var blobData = dataURItoBlob(dataUrl);
var fileName = file.name;
var params = {Key: fileName, ContentType: file.type, Body: blobData};
bucket.upload(params, function (err, data) {
console.log(data);
console.log(err ? 'ERROR!' : 'UPLOADED.');
@psbolden
psbolden / gist:fdecf4ba95ba01a95c2ab20c799e30d8
Created April 14, 2017 21:45
Image to DataUrl using File Reader
//Source: http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript
$( "#imagetourl" ).click(function() {
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
//libraries used:
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
//Polyfills
https://rawgit.com/eligrey/Blob.js/master/Blob.js
https://rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js
https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js
//all in one save option
$( "#save" ).click(function() {
var img = new Image,
Source: http://stackoverflow.com/questions/22387627/how-to-save-an-image-in-its-original-size-in-a-canvas-after-scaled-the-canvas
The size you set with the width and height properties will be the image's final size.
canvas.width = 1920; // actual size given with integer values
canvas.height = 1080;
If you need to scale down while on screen you need to use CSS (one of those special cases):
canvas.style.width = '960px'; // show at 50% on screen
canvas.style.height = '540px';
@psbolden
psbolden / d3update.html
Created March 20, 2017 15:56
d3 update example
<p>
<label for="nValue"
style="display: inline-block; width: 240px; text-align: right">
angle = <span id="nValue-value"></span>
</label>
<input type="number" min="0" max="360" step="5" value="0" id="nValue">
</p>
<p>
@psbolden
psbolden / lambdainvoke.js
Last active March 17, 2017 16:59
invoke lambda function from AWS Javascript SDK
//Source: http://stackoverflow.com/questions/33659059/invoke-amazon-lambda-function-from-node-app?rq=1
var AWS = require('aws-sdk');
// you shouldn't hardcode your keys in production! See http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/node-configuring.html
AWS.config.update({accessKeyId: 'akid', secretAccessKey: 'secret'});
var lambda = new AWS.Lambda();
var params = {