Hatalı bir nedenden dolayı çalışan contenteditable div dosyasına yapıştırma Kodumda, resmin sürüklenen veya kopyalanan bir küçük resmini oluşturuyorum. Sürükle ve bırak bir sorun değil ama kopyala yapıştır ile Safari'de bir hata görebiliyorum (aşağıdaki anlık görüntü) ama yine de küçük resim oluşturuldu!Safari
İlgili pasajı:
document.getElementById('target').addEventListener('paste', function(event){
console.log("pasted!", event);
this.style.background='green';
// get pasted data; Source: http://codingmiles.com/pasting-image-contenteditable-div/
var pastedData = event.clipboardData.items[0];
console.log("pastedData",pastedData);
// If the clipboard data is of type image, read the data
if(pastedData.type.indexOf("image") === 0) {
console.log('calling thumbnail function'); // does not show up in the console! o.O
composeThumbnail(pastedData.getAsFile()); // this still works!
}
});
function composeThumbnail(file) { // source: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
if (!/^image\//.test(file.type)) { // if not an image; 0 since we take only 1 image, if multiple dragged at once, consider only the first one in the array
console.log('ERROR: Not an image file.');
return false;
}
// compose an <img> for the thumbnail
var thumbnailImage = document.createElement("img");
thumbnailImage.file = file;
document.getElementById('target').appendChild(thumbnailImage);
var reader = new FileReader();
reader.onload = (function(thumbnailImage) {
// this image is part of the data, so send typing notification to the agent
return function(event) {
thumbnailImage.src = event.target.result;
};
})(thumbnailImage);
reader.readAsDataURL(file);
}
#target{
width: 100%;
height: 200px;
border: 2px solid black;
border-radius: 5px;
background: transparent;
padding: 15px;
}
#target img{
height: 25%;
width: auto;
vertical-align: middle;
border-radius: 5px;
padding: 5px;
}
#target *{
vertical-align: text-top;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="target" contenteditable="true"></div>
</body>
</html>
, ben macun etkinlik için this resource kullandık işleyicisi.
Safari sürümüm 9.1 ve Mac OS X El Capitan'dayım.
Küçük resim neden oluşturuluyor? Burada neyi özlüyorum?