How to Integrate Shutterstock Image Editor in HTML app? - javascript

I want to integrate Shutterstock Image Editor in my simple HTML app. So I make a developer account in Shutterstock and create my API Key. Below is my API:
Now I am using above API Key (Consumer Key) in my HTML as describe here. Below is my HTML file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://s.picdn.net/editor/image/assets/integration.js"></script>
<script>
window.editorInstance = window.Editor({
apiKey: 'e1818-c5e61-74ce1-7ee31-6c7f8-7fb6d',
language: 'en',
image: 'https://www2.shutterstock.com/blog/wp-content/uploads/sites/5/2015/05/volcano-header-1440x960.jpg',
excludeFeatures: ['filters'],
initialPanel: 'text',
logo: true,
logoUrl: 'https://www2.shutterstock.com/base/public/images/logos/logo-shutterstock-de64a370ef.png',
primaryActionText: 'Save and close',
container: document.querySelector('#editor'),
canvas: {
height: 500,
width: 500,
fill: 'rgb(62, 69, 79)'
},
presets: [{
name: 'Icon',
height: 128,
width: 128
}, {
name: 'Book Cover',
height: 1600,
width: 2400
}],
onPrimaryAction: function() {
window.editorInstance.getBase64({
format: 'jpg',
quality: .91
}).then(function(base64) {
// Handle base64 image data
window.editorInstance.hide();
});
}
});
// Launch instance of Editor
window.editorInstance.launch().then(function(editor) {
// Actions
}).catch(function(err) {
// Handle error
});
</script>
After running my above HTML page Editor doesn't render. Below is my console log showing:
Failed to load resource: the server responded with a status of 403 (Forbidden)
and below screen is showing.
Also I visit Fiddle to integrate editor in HTML but this API is using JSFiddle Client. My question is how I implement Shutterstock photo editor in my HTML app. Please let me know what I'm doing wrong in my above code.

You need to contact api [at] shutterstock.com in order to access the Editor - they'll need to manually enable your api key for it.

Related

Using Mapbox Javascript SDK to import external geojson file

I'm trying to use Mapbox Static API through their Javascript SDK. I want to upload an external geojson source to my map. I can't figure out a way to do it. I tried following a Mapbox tutorial called Using style parameters with Static Images API.
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Demo: Static images with style parameters</title>
<script src="https://unpkg.com/#mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<style>
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img id="traffic" src="" alt="Mapbox traffic map" />
</div>
</body>
<script>
const mapboxClient = mapboxSdk({ accessToken: 'API TOKEN' });
const addLayerStyle = {
'id': 'traffic',
'type': 'line',
'source': {
'type': 'geojson',
//'url': 'mapbox://mapbox.mapbox-traffic-v1'
//'url': 'https://raw.githubusercontent.com/zaynaib/chicago-elections/main/election_leaflet/data/chicago-wards.geojson'
},
'source-layer': 'traffic'
};
const request = mapboxClient.static.getStaticImage({
ownerId: 'mapbox',
styleId: 'light-v10',
width: 500,
height: 350,
position: {
coordinates: [-87.6298, 41.8781],
zoom: 12
},
addlayer: addLayerStyle,
before_layer: 'road-label'
});
const staticImageUrl = request.url();
document.getElementById('traffic').src = staticImageUrl;
</script>
</html>
From the docs, "source.url must be a mapbox:// tileset URL, and must be accessible to the access token used in the request. source.type must be either raster or vector"
One solution would be to convert your data to a vector tilest using Tippecanoe then upload your vector file in Mapbox Studio to generate a link that starts with mapbox://
Another option would be to add the GeoJSON to the image as an overlay

Can't get MiradorImageTools Plugin to work

I'm trying to get the MiradorImageTools plugin to work with mirador image viewer.
I'm using a very basic html page to test:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mirador-Test</title>
</head>
<body>
<h1>Title</h1>
<div>
<p>blah</p>
<div id="my-mirador" />
<script src="https://unpkg.com/mirador#latest/dist/mirador.min.js"></script>
<script src="https://unpkg.com/mirador-image-tools#0.10.0/umd/mirador-image-tools.min.js"></script>
<script type="text/javascript">
const config = {
"id": "my-mirador",
"manifests": {
"https://iiif.lib.harvard.edu/manifests/drs:48309543": {
"provider": "Harvard University"
}
},
"windows": [
{
"imageToolsEnabled": "true",
"manifestId": "https://iiif.lib.harvard.edu/manifests/drs:48309543",
}
]
};
// var mirador = Mirador.viewer(config);
var mirador = Mirador.viewer(config, [MiradorImageTools]); // <-- Error!
</script>
</div>
</body>
</html>
This gives me the following error:
Uncaught ReferenceError: MiradorImageTools is not defined
<anonymous> ./test3.html:36
test3.html:36:45
If I leave the plugin out, replacing the problematic line with the commented-out line above it, the whole thing works and I get mirador showing as it should.
So clearly I'm referencing the plugin wrong. But what would be the right way to do it?
To use MiradorImageTools, and any other Mirador plugin (as of v3.0.0), you will need to import the packages and create a build of the project using a tool like Webpack or parcel.
An example of this type of setup can be seen here: https://github.com/projectmirador/mirador-integration that includes examples using both Webpack and parcel.
./src/index.js
import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
const config = {
id: 'demo',
windows: [{
imageToolsEnabled: true,
imageToolsOpen: true,
manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
}],
theme: {
palette: {
primary: {
main: '#1967d2',
},
},
},
};
Mirador.viewer(config, [
...miradorImageToolsPlugin,
]);
See the README there for more information about how to build for the specific tools.

Google Analytics data to display on my website / using Javascript

I need to display Analytics dashboard on my web site. Like export it from google's website to mine.
I already used Reporting API V4
But I only get the login button.
as you can see, the dashboard from analytics are not displayed.
I need to do it with javascript or C#.
My code (based on this link ):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Analytics Reporting </title>
<meta name="google-signin-client_id" content="472734728686-21tqq751d9mdpkopnjmc1dnctf9644qc.apps.googleusercontent.com">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>
<h1> Analytics Reporting</h1>
<p>
<div class="g-signin2" data-onsuccess="queryReports"></div>
</p>
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
var VIEW_ID = '130082935';
function queryReports() {
gapi.client.request({
path: '/v4/reports:batchGet',
root: 'https://analyticsreporting.googleapis.com/',
method: 'POST',
body: {
reportRequests: [
{
viewId: VIEW_ID,
dateRanges: [
{
startDate: '7daysAgo',
endDate: 'today'
}
],
metrics: [
{
expression: 'ga:sessions'
}
]
}
]
}
}).then(displayResults, console.error.bind(console));
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
I would suggest you look at Google Analytics Embed API. It is much easier from a standpoint based on my experience.

Facebook Check-In button for my website

I am trying to implement a "Check-In" button for my website. The main purpose: when the user clicks the button, a Facebook share dialog will be opened and the users will be checked in a custom place. The user post will not be automatically posted and the message will not be set so that it dont violate the Facebook policy.
As fas as I know, this can happen with the Facebook Open Graph stories. I have added a "Place" option as an Open Graph Object type. I know that to able to do this my app requires "publish_actions" permission and my app is in the developers mode, so thats not the problem. I use Facebook Javascript SDK. So the code goes like this:
This is the OG markup (given by facebook):
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# place: http://ogp.me/ns/place#">
<meta property="fb:app_id" content="my-app-id" />
<meta property="og:type" content="place" />
<meta property="og:url" content="my-url" />
<meta property="og:title" content="my-place-name" />
<meta property="og:image" content="sample-url-image" />
<meta property="place:location:latitude" content="Sample Location: Latitude" />
<meta property="place:location:longitude" content="Sample Location: Longitude" />
and this is the function that invokes the share dialog (also given by facebook):
function share()
{
FB.api(
'me/objects/place',
'post',
{'object': {
'og:url': 'my-url',
'og:title': 'my-place-name',
'og:type': 'place',
'og:image': 'sample-url-image',
'og:description': '',
'fb:app_id': 'my-app-id',
'place:location:latitude': 'Sample Location: Latitude',
'place:location:longitude': 'Sample Location: Longitude'
}},
function(response) {
// handle the response
// for example (using Jquery)
$('#element').append('shared');
}
);
}
and this is how the function is called:
<span onclick="share()">click to share</span>
<div id="element"></div>
The problem is that the code doesn't work and the share dialog won't open. Where is my mistake?
Finally I created it just as a share button. With option to check if it's really posted, not canceled after that.
FB.ui({
method: 'share',
mobile_iframe: true,
title: 'My title',
href: 'url to share',
picture: 'image URL',
description: 'The description'
}, function (response) {
if (response && !response.error_message) {
alert('Thank you for sharing!');
} else {
alert('You have cancelled the share.');
}
});
},{scope: 'email'});

Google Analytic Embed API chart: Responsive

How would I make this Google Analytic Embed API chart responsive? I noticed that the demo on this page is reponsive: https://ga-dev-tools.appspot.com/embed-api/basic-dashboard/
I have also seen various ways of doing this with Google Charts here
https://code.google.com/p/google-visualization-api-issues/issues/detail?id=1056
<!doctype html>
<html lang="en">
<head>
<title>Google Charts</title>
<script>
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {
var ACCESS_TOKEN = 'XXX'; // obtained from your service account
gapi.analytics.auth.authorize({
serverAuth: {
access_token: ACCESS_TOKEN
}
});
var linechart = new gapi.analytics.googleCharts.DataChart({
query: {
ids: 'ga:XXXXXX',
metrics: 'ga:users',
dimensions: 'ga:date',
'start-date': '30daysAgo',
'end-date': 'yesterday'
},
chart: {
type: 'LINE',
container: 'line-chart',
options: {
width: '100%',
title: 'Test.com: Visitors over the past 30 days.',
fontSize: 12
}
}
});
linechart.on('success', function(response) {
// response.chart : the Google Chart instance.
// response.data : the Google Chart data object.
});
linechart.execute();
});
</script>
</head>
<body>
<div>
<div id="embed-api-auth-container"></div>
<div id="line-chart" style='width:100%;height:300px;'></div>
</div>
</body>
</html>
I answered this over here
(Google Embed API) How to change chart-table-style width
Basically you just add an option element and assign width of x% within the charts option element
I just noticed the same issue, setting:
options: {
width: '100%'
}
doesn't work when document width changes (only 'TABLE' chart is responsive 'out of the box').
As workaround, you need to trigger a chart redraw on window resize:
window.addEventListener('resize', function() {
linechart.execute();
});
Sidenotes:
linked Google page doesn't seems to use this or whatelse workarounds to have the chart responsive but the behavior is the same;
if you have animations enabled in your chart those animations might be played multiple times on window resize;
I was using google analytics API and I had the same issue but it worked for me by adding
options:{width:'100%'}
chart: {
type: 'LINE',
container: 'timeline',
options: {width: '100%'}
}

Categories

Resources