Last active
December 26, 2016 02:18
-
-
Save oboenikui/4829c9038aa9de4777c5ca197ba976d3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(()=>{ | |
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