psbolden’s gists

psbolden / css

Created February 16, 2017 17:10

Fabric.js Text Editor

psbolden / html

Created February 16, 2017 17:59

fabric.js set text

psbolden / gist:c5b2c0a09d2956f5bacd61a6730f8c43

Created March 7, 2017 16:52

download fabric canvas to url with name

	http://stackoverflow.com/questions/20032214/recreate-fabric-js-canvas-and-export-as-an-image

	function download(url,name){
	// make the link. set the href and download. emulate dom click
	$('<a>').attr({href:url,download:name})[0].click();
	}
	function downloadFabric(canvas,name){
	// convert the canvas to a data url and download it.
	download(canvas.toDataURL(),name+'.png');
	}

psbolden / gist:f42c85becc0d95c815d04645dd955f88

Created March 8, 2017 20:12

d3plus text wrapping example

	Source: https://bl.ocks.org/davelandry/a39f0c3fc52804ee859a

	<!DOCTYPE html>
	<meta charset="utf-8">

	<script src="//d3plus.org/js/d3.js"></script>
	<script src="//d3plus.org/js/d3plus.js"></script>

	<style>

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 = {

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 / gist:a5e545f612197dbaf53d4e31a3262a58

Created March 31, 2017 17:24

canvas size

	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 / gist:06ef7aff1afe4cd0465fa598c6873cd8

Created April 14, 2017 19:48

canvas to blob

	//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,

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);
	}

psbolden / gist:b89b24c2473c8084812ccb42875bba45

Created April 17, 2017 16:52

canvas to s3

	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.');