1

現在、キャンバスを使用して画像のサイズを変更し、サイズ変更した画像をサーバーに送信しています。すでにこれを行っており、キャンバスを使用して問題なく動作します。ただし、この要件では、ユーザーがキャンバスのサイズを変更する必要があります。サイズを変更できますただし、送信される画像はサイズ変更されたものではなく、元の画像です。描画部分のコードは次のとおりです。

function drawImageOnCanvas(me){
    var file = me.files[0];         
    var fileReader = new FileReader();
    fileName = file.name;

    //make the div visible
    $j(".dv2").show();

    fileReader.onloadend = function(e) {
        var tempImg = new Image();
        var dataURL;
        tempImg.src = this.result;
        tempImg.onload = function() {
            var MAX_WIDTH = 1000;
            var MAX_HEIGHT = 800;
            var tempW = tempImg.width;
            var tempH = tempImg.height;
            if (tempW > tempH) {
                if (tempW > MAX_WIDTH) {
                    tempH *= MAX_WIDTH / tempW;
                    tempW = MAX_WIDTH;
                }
            } else {
                if (tempH > MAX_HEIGHT) {
                    tempW *= MAX_HEIGHT / tempH;
                    tempH = MAX_HEIGHT;
                }
            }            
            var canvas = document.getElementById('myCanvas');
            canvas.width = tempW;
            canvas.height = tempH;                  
            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0,tempW,tempH);
            $j("#jq_stretch").height(tempH);
            $j("#jq_stretch").width(tempW);
            $j("#jq_hw_size").text(tempW + " x " + tempH);
        }
    }
    fileReader.onerror = function(e) {
        alert("There was an error reading the file.  Please try again.");
    }
    fileReader.onabort = function(e) {
        alert("There was an error reading the file.  Please try again.");
    }
    fileReader.readAsDataURL(file); 
}

次に、ユーザーにパーツのサイズを変更してもらいます:

$j(function() {
    $j("#jq_stretch").resizable();
    $j("#jq_stretch").resize(function(){
        $j("#jq_hw_size").text($j(this).width() + " x " + $j(this).height());
    });
});

これは私の送信部分です:

function uploadImage(){
    var canvas = document.getElementById('myCanvas');
    var attachment = canvas.toDataURL("image/jpeg");
    attachment = attachment.slice(23);
    var positionIndex = 0;
    var fileSize = attachment.length;   
    var chunkSize = 950000;        //Maximum Javascript Remoting message size is 1,000,000 characters       
    var fileBody = "";
    showMsg('waitmsg',1);

    if(fileSize <= positionIndex + chunkSize) {
        fileBody = attachment.substring(positionIndex);
    } else {
        fileBody = attachment.substring(positionIndex, positionIndex + chunkSize);
    }
    //now try to upload
    VFC99_ImageUploader.doUploadAttachment(
        '{!parentId}', 
        fileBody, 
        fileName, 
        function(result, event) { 
            if(event.status){                 
                if(result == "successful upload") displayMsg(true,result);
                else displayMsg(false,result);
            }
            else 
                displayMsg(false,event.message);

            //finish the waiting msg
            showMsg('waitmsg',0);
        },
        {buffer: true, escape: true, timeout: 120000}
    );
}
4

1 に答える 1

1

実際、キャンバスを含むdivのサイズを変更していたので、キャンバスのデータを変更していませんが、キャンバスのサイズを変更していましたが、視覚的なものだったと思います.解決策は、からキャンバスを再描画することでした.ユーザーサイズ :

    var canvas = document.getElementById('myCanvas');
    //just added the 6 lines and it works great
var w = $j("#jq_stretch").width();
var h = $j("#jq_stretch").height();
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext("2d");
    ctx.drawImage(tempImg, 0, 0,w,h);
    var attachment = canvas.toDataURL("image/jpeg");
于 2013-10-16T10:25:50.947 に答える