web-dev-qa-db-ja.com

アップロード前の画像のサイズ変更

ユーザーが自分のWebサイトにjpeg形式で写真をアップロードする手段を提供する必要があります。ただし、写真の元のサイズは非常に大きいため、ユーザーがアップロード前にサイズ変更オプションを非常に簡単にしたいと思います。私の唯一のオプションは、Webサービスを介して写真をアップロードする前に写真のサイズを変更するクライアント側のアプリケーション、または画像のサイズを変更するアップロード操作のクライアント側のJavaScriptフックです。 JavaScriptイメージのサイズ変更ライブラリがないため、2番目のオプションは非常に暫定的であり、現在のサイズ変更ツールImageMagickをJavaScriptで実行するのは困難です。

私はこれがあまりにも珍しいシナリオではないと確信しており、これを行うサイトへのいくつかの提案やポインタは高く評価されるでしょう。

javascriptimage-processing
51
ProfK

いくつかのオプションがあります：

  1. Java
  2. ActiveX（Windowsのみ）
  3. シルバーライト
  4. フラッシュ
  5. フレックス
  6. Google Gears （最新バージョンは、デスクトップからサイズ変更およびドラッグアンドドロップが可能です）

私はあなたが説明したものと同様の解決策を探して多くの研究を行ってきましたが、そこには質と柔軟性が大きく異なる多くの解決策があります。

私の提案は、必要なものの80％を実行し、ニーズに合わせてカスタマイズするソリューションを見つけることです。

7
digitalsanctum

2011年には、File APIとcanvasを使用してそれを行うことができます。現在のところ、これはFirefoxおよびChromeでのみ機能します。以下に例を示します。

var file = YOUR_FILE,
    fileType = file.type,
    reader = new FileReader();

reader.onloadend = function() {
  var image = new Image();
      image.src = reader.result;

  image.onload = function() {
    var maxWidth = 960,
        maxHeight = 960,
        imageWidth = image.width,
        imageHeight = image.height;

    if (imageWidth > imageHeight) {
      if (imageWidth > maxWidth) {
        imageHeight *= maxWidth / imageWidth;
        imageWidth = maxWidth;
      }
    }
    else {
      if (imageHeight > maxHeight) {
        imageWidth *= maxHeight / imageHeight;
        imageHeight = maxHeight;
      }
    }

    var canvas = document.createElement('canvas');
    canvas.width = imageWidth;
    canvas.height = imageHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0, imageWidth, imageHeight);

    // The resized file ready for upload
    var finalFile = canvas.toDataURL(fileType);
  }
}

reader.readAsDataURL(file);
61
Nicolas BADIA

複数のテクノロジーに対応した Pluploadツール があります。これは、アップロード前にサイズ変更ができることを宣言していますが、まだ試していません。 javascript libsを処理するバイナリイメージに関する質問 にも適切な答えがあります。

12
calavera.info

Jaoとrussauが言うことは本当です。その理由は、セキュリティ上の理由によりJavaScriptがローカルファイルシステムにアクセスできないためです。 JavaScriptが画像ファイルを「見る」ことができる場合、任意のファイルを見ることができ、それは危険です。

これを行うには、アプリケーションレベルのコントロールが必要です。つまり、Flash、JavaまたはActive-X。

2
Diodeus - James MacFarlane

JavaまたはそのためのActiveX。たとえば Thin Image Upload が必要だと思います。

2
jao

ここでは、tensorflow.js（soo fast it！）にサイズ変更およびトリミングされた画像（256x256px）を追加し、さらにトリミングされた画像の下に元の画像を表示して、何が切り取られたかを確認します。

$("#image-selector").change(function(){


var file = $("#image-selector").prop('files')[0];   

var maxSize = 256;  // well now its minsize
var reader = new FileReader();
var image = new Image();
var canvas = document.createElement('canvas');
var canvas2 = document.createElement('canvas');     

var dataURItoBlob = function (dataURI) {
    var bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ?
        atob(dataURI.split(',')[1]) :
        unescape(dataURI.split(',')[1]);
    var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var max = bytes.length;
    var ia = new Uint8Array(max);
    for (var i = 0; i < max; i++)
        ia[i] = bytes.charCodeAt(i);
    return new Blob([ia], { type: mime });
};

var resize = function () {
    var width = image.width;
    var height = image.height; 

    if (width > height) {           
        if (width > maxSize) { 
            width *= maxSize / height; 
            height = maxSize;
        }
    } else {
        if (height > maxSize) {
            height *= maxSize / width;
            width = maxSize;
        }           
    }
    if (width==height) { width = 256; height = 256; }


    var posiw = 0;
    var posih = 0;
    if (width > height) {posiw = (width-height)/2; }
    if (height > width) {posih = ((height - width) / 2);} 
    canvas.width = 256;
    canvas.height = 256;
    canvas2.width = width;
    canvas2.height = height;        
     console.log('iw:'+image.width+' ih:'+image.height+' w:'+width+' h:'+height+' posiw:'+posiw+' posih:'+posih);
    canvas.getContext('2d').drawImage(image, (-1)*posiw, (-1)*posih, width, height); 
    canvas2.getContext('2d').drawImage(image, 0, 0, width, height); 
    var dataUrl = canvas.toDataURL('image/jpeg');
    var dataUrl2 = canvas2.toDataURL('image/jpeg');     

        if ($("#selected-image").attr("src")) {
            $("#imgspeicher").append('<div style="width:100%; border-radius: 5px; background-color: #eee; margin-top:10px;"><div style="position: relative; margin:10px auto;"><img id="selected-image6" src="'+$("#selected-image").attr("src")+'" style="margin: '+document.getElementById('selected-image').style.margin+';position: absolute; z-index: 999;" width="" height=""><img id="selected-image2" src="'+$("#selected-image2").attr("src")+'" style="margin: 10px; opacity: 0.4;"></div><div class="row" style="margin:10px auto; text-align: left;"> <ol>'+$("#prediction-list").html()+'</ol> </div></div>');
        }

    $("#selected-image").attr("src",dataUrl);
    $("#selected-image").width(256);
    $("#selected-image").height(256);
    $("#selected-image").css('margin-top',posih+10+'px');
    $("#selected-image").css('margin-left',posiw+10+'px');      
    $("#selected-image2").attr("src",dataUrl2); 
    $("#prediction-list").empty();
    console.log("Image was loaded, resized and cropped");
    return dataURItoBlob(dataUrl);



};

return new Promise(function (ok, no) {

    reader.onload = function (readerEvent) {
        image.onload = function () { return ok(resize()); };
        image.src = readerEvent.target.result;
    };

let file = $("#image-selector").prop('files')[0];       
reader.readAsDataURL(file);});});

HTML実装：

<input id ="image-selector" class="form-control border-0" type="file">

<div style="position: relative; margin:10px auto; width:100%;" id="imgnow">
 <img id="selected-image" src="" style="margin: 10px; position: absolute; z-index: 999;">
 <img id="selected-image2" src="" style="margin: 10px; opacity: 0.4;">                       
</div>

また、最大の幅/高さにサイズを変更するのではなく、最小に変更します。 256x256pxの正方形の画像を取得します。

1
Tim Stieffenhofer

残念ながら、JavaScriptで画像のサイズを変更することはできません。 Silverlight 2 thoでも可能です。

すでに完成したものを購入したい場合： Aurigma Image Uploader はかなり印象的です-ActiveXの$ USD250およびJavaバージョン。サイトにはいくつかのデモがあります。 m facebookが同じコントロールを使用していることを確認してください。

1
russau

純粋なJavaScriptソリューション。私のコードはバイリニア補間によってJPEGのサイズを変更し、exifを失わない。

https://github.com/hMatoba/JavaScript-MinifyJpegAsync

function post(data) {
    var req = new XMLHttpRequest();
    req.open("POST", "/jpeg", false);
    req.setRequestHeader('Content-Type', 'image/jpeg');
    req.send(data.buffer);
}

function handleFileSelect(evt) {
    var files = evt.target.files;

    for (var i = 0, f; f = files[i]; i++){
        var reader = new FileReader();
        reader.onloadend = function(e){
            MinifyJpegAsync.minify(e.target.result, 1280, post);
        };
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
0
hMatoba

画像処理フレームワークを使用してアップロードする前に、クライアント側で画像のサイズを変更できます。

以下では MarvinJ を使用して、次のページの例に基づいて実行可能なコードを作成しました。 "サーバーにアップロードする前にクライアント側で画像を処理する"

基本的に、メソッドMarvin.scale（...）を使用して画像のサイズを変更します。次に、画像をblobとしてアップロードします（メソッドimage.toBlob（）を使用）。サーバーは、受信した画像のURLを提供して応答します。

/***********************************************
 * GLOBAL VARS
 **********************************************/
var image = new MarvinImage();

/***********************************************
 * FILE CHOOSER AND UPLOAD
 **********************************************/
 $('#fileUpload').change(function (event) {
        form = new FormData();
        form.append('name', event.target.files[0].name);
        
        reader = new FileReader();
        reader.readAsDataURL(event.target.files[0]);
        
        reader.onload = function(){
                image.load(reader.result, imageLoaded);
        };
        
});

function resizeAndSendToServer(){
  $("#divServerResponse").html("uploading...");
        $.ajax({
                method: 'POST',
                url: 'https://www.marvinj.org/backoffice/imageUpload.php',
                data: form,
                enctype: 'multipart/form-data',
                contentType: false,
                processData: false,
                
           
                success: function (resp) {
       $("#divServerResponse").html("SERVER RESPONSE (NEW IMAGE):<br/><img src='"+resp+"' style='max-width:400px'></img>");
                },
                error: function (data) {
                        console.log("error:"+error);
                        console.log(data);
                },
                
        });
};

/***********************************************
 * IMAGE MANIPULATION
 **********************************************/
function imageLoaded(){
  Marvin.scale(image.clone(), image, 120);
  form.append("blob", image.toBlob());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<form id="form" action='/backoffice/imageUpload.php' style='margin:auto;' method='post' enctype='multipart/form-data'>
                                <input type='file' id='fileUpload' class='upload' name='userfile'/>
</form><br/>
<button type="button" onclick="resizeAndSendToServer()">Resize and Send to Server</button><br/><br/>
<div id="divServerResponse">
</div>
0
Gabriel Ambrósio Archanjo