Skip to content

Instantly share code, notes, and snippets.

@oboenikui
Last active December 26, 2016 02:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oboenikui/4829c9038aa9de4777c5ca197ba976d3 to your computer and use it in GitHub Desktop.
Save oboenikui/4829c9038aa9de4777c5ca197ba976d3 to your computer and use it in GitHub Desktop.
(()=>{
let responseImage = new Image();
responseImage.style.maxWidth = "100%";
responseImage.style.display = "block";
let canvas = document.createElement("canvas");
document.querySelector('body > form > input[type="submit"]').style.display = "none";
document.getElementById("id_image").addEventListener("change", ev=>{
let files = ev.target.files;
if (!files.length || !files[0].type.match(/^image\/(png|gif|jpeg)$/))
return;
let reader = getDoitsuNoToriReader();
reader.readAsDataURL(files[0]);
})
document.addEventListener("paste", ev=> {
ev.preventDefault();
let data = ev.clipboardData || window.clipboardData;
for(let i=0; i<data.items.length; i++) {
if(data.items[i].type.match(/^image\/(png|gif|jpeg)$/)) {
let file = data.items[i].getAsFile();
let reader = getDoitsuNoToriReader();
reader.readAsDataURL(file);
}
}
})
document.body.appendChild(responseImage);
function canvasToBlob(canvas, callback) {
let type = "image/jpeg";
if (canvas.toBlob) {
canvas.toBlob(callback, type);
} else if (canvas.toDataURL && window.Uint8Array && window.Blob && window.atob) {
var binStr = atob(canvas.toDataURL(type).replace(/^[^,]*,/, ''))
, len = binStr.length
, arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr],{
type: type
}));
} else {
callback(null);
}
}
function getDoitsuNoToriReader() {
let reader = new FileReader();
reader.addEventListener("load", ev=>{
let img = new Image();
img.addEventListener("load", ev=>{
canvas.width = ev.target.width;
canvas.height = ev.target.height;
let c = canvas.getContext("2d");
c.drawImage(ev.target, 0, 0);
canvasToBlob(canvas, blob=>{
if (blob) {
let fd = new FormData(document.forms[0]);
fd.append("image", blob);
let xhr = new XMLHttpRequest();
xhr.open("POST", "");
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", ev=>{
let urlCreator = window.URL || window.webkitURL;
let response = new Blob([ev.target.response],{
type: "image/png"
})
responseImage.src = urlCreator.createObjectURL(response);
}
)
xhr.send(fd);
}
});
}
)
img.src = ev.target.result
})
return reader;
}
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment