[a="id="code1"style="display:none]// from https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript
// thanks Stack Overflow!

// for processing an external URL
const toDataURL = url => fetch("https://corsproxy.io/?" + encodeURI(url))
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
}))

// for processing an uploaded image
const toDataURL2 = file =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(file);
});

// for submitting images to the uploader
const submitImage = dataURL =>
fetch('https://dsipaint.com/paint/includes/ajax_dsipaint_save.php', {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `data=${dataURL}`
})
.then(resp => resp.text())
.then(alert, alert)

// toDataURL("https://cataas.com/cat").then(submitImage)

// add form to DOM
const formXML = `<form method="POST" id="upload-form">
<div id="url-div">
<label for="image-url">Image URL:</label>
<input type="url" id="image-url" name="image-url" placeholder="https://cataas.com/cat">
</div>

<i>OR</i>

<label for="image-file" id="image-file-label">Image file:</label>
<input type="file" id="image-file" name="image-file" accept="image/*">

<div id="submit-div">
<input type="submit" value="Upload!">
<input type="reset" value="Reset" style="margin-left:5px">
</div>
</form>`;
document
.getElementById("blog_body")
.innerHTML += formXML;

document.getElementById("upload-form")
.addEventListener("submit", function uploadForm(event) {
const url = event.target[0].value,
file = event.target[1].files[0];
// console.log({event, url, file});

(file ? toDataURL2(file) : toDataURL(url || "https://cataas.com/cat")).then(submitImage);

event.preventDefault();
})


// clean up extra elements
document.getElementById("trigger").remove();
document.getElementById("code1").remove();
[/a]
[a="id="code2"style="display:none]
// from https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript
// thanks Stack Overflow!

// for processing an uploaded image
function toDataURL2(file, callback) {
var reader = new FileReader();
reader.onloadend = function() {
// console.log(reader.result);
callback(reader.result);
};
reader.onerror = alert;
reader.readAsDataURL(file);
}

// for processing an external URL
function toDataURL(url, callback) {
var request = new XMLHttpRequest();
request.open("GET", "https://corsproxy.io/?" + encodeURI(url));
request.responseType = "blob";
request.onload = function() {
// console.log(request.response);
if(request.statusText != "OK") toDataURL2(request.response, callback);
else alert(request.response);
}
request.send();
}

// for submitting images to the uploader
function submitImage(dataURL) {
var request = new XMLHttpRequest();
request.open("POST", "https://dsipaint.com/paint/includes/ajax_dsipaint_save.php");
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.onload = function() {
// console.log(request.response);
alert(request.response);
};
request.send("data=" + dataURL);
}

document.getElementById("blog_body").innerHTML += '<form method="POST" id="upload-form"><div id="url-div"><label for="image-url">Image URL:</label><input type="url" id="image-url" name="image-url" placeholder="https://cataas.com/cat"></div><i>OR</i><label for="image-file" id="image-file-label">Image file:</label><input type="file" id="image-file" name="image-file" accept="image/*"><div id="submit-div"><input type="submit" value="Upload!"><input type="reset" value="Reset" style="margin-left:5px"></div></form>';

document.getElementById("upload-form")
.addEventListener("submit", function uploadForm(event) {
var url = event.target[0].value,
file = event.target[1].files[0];
// console.log({event, url, file});

if(file) {
toDataURL2(file, submitImage);
} else {
toDataURL(url || "https://cataas.com/cat", submitImage);
}

event.preventDefault();
})

[/a]
[a="id="code3"style="display:none]
// from https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript
// thanks Stack Overflow!

// for processing an external URL
function toDataURL(url, callback) {
var img = new Image(), src = "https://corsproxy.io/?" + encodeURI(url);
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL();
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
}

// for submitting images to the uploader
function submitImage(dataURL) {
var request = new XMLHttpRequest();
request.open("POST", "https://dsipaint.com/paint/includes/ajax_dsipaint_save.php");
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.onload = function() {
// console.log(request.response);
alert(request.response);
};
request.send("data=" + dataURL);
}

document.getElementById("blog_body").innerHTML += '<form method="POST" id="upload-form"><div id="url-div"><label for="image-url">Image URL:</label><input type="url" id="image-url" name="image-url" placeholder="https://cataas.com/cat"></div><div id="submit-div"><input type="submit" value="Upload!"><input type="reset" value="Reset" style="margin-left:5px"></div></form>';

document.getElementById("upload-form")
.addEventListener("submit", function uploadForm(event) {
var url = event.target[0].value;
toDataURL(url || "https://cataas.com/cat", submitImage);

event.preventDefault();
})

[/a]