Возникла необходимость, вернее, усталость от неудобства. В багтрекер постоянно нужно вставлять скриншоты, и вот как раз сохранение в файл перед прикреплением в форму и достало.
Кроссбраузерностью и поддержкой старых версий не заморачивался, в компании повсеместно ИЕ, обновления приходят и устанавливаются постоянно. Сам я предпочитаю Хром. В итоге так и получилось, ИЕ > 9, Хром, ну и Опера, так как она сейчас на ВебКите, Лисицу чинить не стал.
В форму добавляю:
<input type="hidden" id="screenshot" name="screenshot" value="">
<div style="margin-top: 20px; position: relative;">
<img id="isimg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII="></img>
<div id="isforimg" contenteditable="true">
</div>
</div>
Стили:
<style>
#isimg {
margin-left: 100px;
padding: 5px;
width: 320px;
height: 220px;
border: none;
background: url(../images/screenshot-grey.png) no-repeat center center;
}
#isforimg {
position: absolute;
padding: 5px;
width: 70px;
height: 70px;
overflow: hidden;
border: 2px solid #eee;
top: -10px;
left: 370px;
text-align: center;
vertical-align: middle;
line-height: 60px;
background: url(../images/klipper.png) no-repeat center center;
}
</style>
На сервере:
if (!empty($_POST['screenshot']) && ($content_pos = strpos($_POST['screenshot'], ';base64,')) && $content_pos!==false) {
try {
$filename = md5($issue->getIssueId().'screenshot'.microtime(1));
$file_path = $folderPath.DIRECTORY_SEPARATOR.$filename;
$fcontent = base64_decode(substr($_POST['screenshot'], $content_pos + 8));
if (false !== file_put_contents($file_path, $fcontent)) {
И js (без jQuery):
if(document.attachEvent) {
document.attachEvent('paste', onPasteTriggered); // ie < 11
}
else if(document.addEventListener) {
document.addEventListener('paste', onPasteTriggered, false); // google chrome or ie >= 11
}
function onPasteTriggered(e) {
if (e.srcElement.id != 'isforimg')
return;
if (e.clipboardData || e.view.clipboardData) { //google chrome or ie > 9
var copiedData = e.clipboardData ? e.clipboardData.items[0] : e.view.clipboardData.files[0]; //Get the clipboard data
/*if the clipboard data is of type image, read the data*/
if(copiedData && copiedData.type && copiedData.type.indexOf('image') == 0) {
var imageFile = e.clipboardData ? copiedData.getAsFile() : copiedData;
/*HTML5 FileReader API to read the image file*/
var reader = new FileReader();
reader.onload = function (evt) {
var result = evt.target.result; //base64 encoded image
document.getElementById('screenshot').value = result;
document.getElementById('isimg').src = result;
};
reader.readAsDataURL(imageFile);
document.getElementById('isforimg').setAttribute('contenteditable', 'false'); // for IE - for not insert img
setTimeout(function(){document.getElementById('isforimg').setAttribute('contenteditable', 'true');}, 200); //
}
}
setTimeout(function(){ document.getElementById('isforimg').innerHTML = ''; }, 100); //erase what inserted
}
