Safari

2016-03-28 59 views
0

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

Hata: Benim kod enter image description here

İ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>
yorum belirtildiği gibi

, 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?

cevap

0

Safari YAPILANDIRILIR yapıştırılmış görüntüyü dönüştürülemez DIV. Son zamanlarda Safari v9.1.1 ile kontrol ediyorum, hala desteklemiyor.

this page'un dibine bakabilirsiniz, öyle diyor.