4

ユーザーが画像を選択して、base64 画像データを Chrome の Web SQL データベースに保存できるようにする必要があります。次に、ユーザーがオンラインになった時点で、それらのデータをサーバーにアップロードします。

次のように画像データを取得できます。

function onFileUploadChange(input) {
        if (input.files && input.files[0]) {
            //alert(input.files.length);
            for (i = 0; i < input.files.length; i++) {
                previewImage(input.files[i], "ImageTag" + getUniqueID());
            }
        }
    }

    function previewImage(file, imgID) {

        $("#ImagePreview").append("<img id='" + imgID + "'  />");

        var reader = new FileReader();
        reader.onload = function (e) {
            $("#" + imgID)
            .attr('src', e.target.result)
            .width(200)
            .height(200);

        };

        reader.readAsDataURL(file);
    }

image.src には base64 画像データがあります。

ユーザーが保存をクリックすると、base64 画像データであるすべての画像の src を取得し、クロムの web sql データベースに保存します。問題は、ほとんどの写真が大きすぎることです。元のサイズの 1/4 になるようにサイズを変更し、Web SQL に保存します。それを行う方法はありますか？おそらくキャンバスで？

ありがとう。

4

1 に答える 1

7

キャンバスで実行する例を次に示します。

http://jsfiddle.net/7QMqX/

jsfiddle がダウンした場合の関連部分は次のとおりです。

img.onload = function() {
    // original image size:
    console.log(img.width); // 182
    console.log(img.height); // 176
    // lets resize it to 1/4 original size
    var bigside = Math.max(img.width, img.height);
    var ratio =  0.25;
    can.width = img.width * ratio;
    can.height = img.height* ratio;
    ctx.scale(ratio, ratio); // scale by 1/4
    ctx.drawImage(img, 0, 0);
    // Lets also show the original image for comparison:
    document.body.appendChild(img);

    // anyway, now we can use this command to get the base64 data of the resized image:
    console.log(can.toDataURL());
}

キャンバスには何でも描画できるため、画像をロードし、キャンバスのサイズを画像のサイズの 1/4 に変更し、キャンバスを 1/4 に拡大してから、画像を描画します。toDataURL次に、 base64 文字列を返すを呼び出してキャンバス上のビットマップを取得できます。

キャンバスに描画されたアイテムのいずれかが same-domain またはcors-enabledでない場合、 toDataURL は失敗することに注意してください。

于 2012-06-03T03:57:40.683 に答える