Стили:<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 }