1

IE 9 以外の IE では html5 ドラッグオーバーがサポートされていないことを知っています。js ファイル コードをコピーして貼り付けていますが、画像のドラッグ アンド ドロップで Chrome / Mozilla で動作していますが、IE では動作していません。すべてのブラウザで動作するソリューションが必要です。たとえば、js からドラッグオーバー機能を削除し、画像パスを指定する方法 (ハードコード) または単純なファイル アップロードを使用する方法を教えてください。感謝し、応答を待っています。

    jQuery(function($) {
    var sourceImg = $('<img>')[0],
    description = $('#description'),
    sourceCanvas = $('#source')[0],
    sourceCtx = sourceCanvas.getContext('2d'),
    compressedCanvas = $('#compressed')[0],
    compressedCtx = compressedCanvas.getContext('2d'),
    compressedOverlayCanvas = $('#compressedOverlay')[0],
    compressedOverlayCtx = compressedOverlayCanvas.getContext('2d'),
    all = $('canvas'),
    quality = 88,
    scale = 10;

function analyzeImage(image){
    all.attr('width', image.width);
    all.attr('height', image.height);
    sourceCtx.drawImage(image, 0, 0);
    var sourceData = sourceCtx.getImageData(0, 0, image.width, image.height),
        compressed = $('<img>');
    $('<img>')
        .on('load', function() {
            compressedCtx.drawImage(this, 0, 0);
            var compressedData = compressedCtx.getImageData(0, 0, image.width, image.height),
                data0 = sourceData.data,
                data1 = compressedData.data;

            for(var i = 0, l = data0.length; i < l; i+=4) {
                for(var j = 0; j < 3; j++) {
                    var error = Math.abs(data0[i+j]-data1[i+j]);
                    data0[i+j] = error*scale;
                }
            }
            compressedCtx.putImageData(sourceData, 0, 0);
            compressedOverlayCtx.drawImage(compressedCanvas, 0, 0);
            $('#description').fadeOut('slow');
            $('#results').show();
        }).attr('src', sourceCanvas.toDataURL('image/jpeg', quality*0.01)); 
}

$('html')
    .on('dragover', function(e) {e.preventDefault(); return false;})
    .on('drop', function(e) {
        var files = e.originalEvent.dataTransfer.files;
        if (files.length > 0) {
            var file = files[0];
            if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
                var reader = new FileReader();
                // Note: addEventListener doesn't work in Google Chrome for this event
                reader.onload = function (evt) {
                    sourceImg.src = evt.target.result;
                };
                reader.readAsDataURL(file);
            }
        }
        return false;
    });

$('input').on('change', function() {
        $(this).next('.value').text($(this).val());
        quality = document.forms[0].quality.value * 1;
        scale = document.forms[0].scale.value * 1;
        if(sourceImg.src) analyzeImage(sourceImg);
    }).change();

$(sourceImg)
    .on('error', function () { alert('something went wrong when loading the image'); })
    .on('load', function () {
        _gaq.push(['_trackEvent', 'iela', 'imageAnalyzed']);
        analyzeImage(sourceImg);
    });

});

4

2 に答える 2