Ctrlユーザーが貼り付け+Vを使用して画像/スクリーンショットをdivに保存しようとしてい#pasteImageDivます。Chrome では正常に動作しますが、IE では動作しません。
IE10を使用しています。
onpasteこれまでのところ、任意のテキストを div #pasteImageDiv に貼り付けると、IE でもイベントを適切にキャッチできることがわかりました。しかし、テキストの代わりに画像を貼り付けても、キャッチしません(IE はイベントonpasteを処理する関数に入ることさえしません)。onpaste
document.getElementById('pasteImageDiv').onpaste = function (event) {テキスト文字列または画像のどちらを貼り付けても、Chrome でうまく機能しています。私が直面している問題の種類を理解していただければ幸いです。それでも、追加情報が必要な場合はお知らせください。
$('#pasteImageHere, #pasteImageDiv').click(function(e){ //on paste image button click
e.preventDefault();
$('#hideOnPaste').hide();
//document.getElementById('pasteImageDiv').click();
document.getElementById('pasteImageDiv').style.backgroundColor = "#F1F1F1";
document.getElementById('pasteImageDiv').onpaste = function (event) {
$('#hideOnPaste').hide();
//console.log(event.clipboardData.getData('image/png'));
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
var elem = document.createElement("img");
elem.setAttribute("id", "pastedImage");
elem.setAttribute("height", "200");
elem.setAttribute("width", "300");
document.getElementById("pasteImageDiv").appendChild(elem);
document.getElementById("pastedImage").src = event.target.result;
document.getElementById('inputImageData').value = event.target.result;
console.log($('#inputImageData').val());
$('#pastedImage').css('width', '300px');
$('#pastedImage').css('height', '200px');
document.getElementById("pastedImage").style.height = '200px';
};
reader.readAsDataURL(blob);
$('#removePastedImage').show();
}
}
});