有没有办法在 HTML5 中保存到 Web SQL 之前调整图像的大小？

Question

我需要允许用户选择图像，然后将 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 图像数据。

一旦用户点击保存，我将抓取所有图像的 src，即 base64 图像数据，并将它们保存到 chrome 的 web sql 数据库。 现在的问题是大多数图片都太大了。我想将它们调整为原始大小的 1/4，然后将其保存到 web sql。有什么办法吗？可能是画布？

谢谢。

Answer 1

这是在画布中执行此操作的示例：

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字符串。

请注意，如果绘制到画布的任何项目不是同域或cors-enabled，则 toDataURL 将失败。