javascript - 调整 Canvas 大小不会更改数据

Question

我目前正在使用 Canvas 调整图像大小，然后将调整大小的图像发送到我的服务器。我已经完成了此操作，并且使用 Canvas 可以正常工作。但是对于此要求， Canvas 将由用户调整大小。我能够正确调整 Canvas 大小并从 Canvas 发送调整大小的图像。但是发送的图像不是调整大小的图像，而是原始图像。这是我的绘图部分的代码:

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}
    );
}

Answer 1

我让它工作了。事实上，我正在调整包含 Canvas 的 div 的大小，因此它不会改变 Canvas 数据，但 Canvas 正在调整大小，但我认为这只是视觉上的。解决方案是重新绘制来自用户的 Canvas 尺寸:

    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");