Question

我正在使用html5存储来存储我的图像。它在chrome方面效果很好。在FireFox中它可以工作8/10次。

function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        console.log("line 1 : " + img.src);
        var dataURL = canvas.toDataURL('image/jpeg');
        console.log("line 2 : " + dataURL.replace(/^data:image\/(jpeg);base64,/, ""));
        return dataURL.replace(/^data:image\/(jpeg);base64,/, "");
    }

有时它只返回“数据”。

我看到画布大小是0x0：

canvas.width = img.width;
canvas.height = img.height;

为什么会这样？

Answer 1

如果画布的高度或宽度为0，则为字符串＆＃34; data：，＆＃34;归还。

这很可能是某些图像无法接收正确的dataUrl的原因。

检查img元素和/或脚本以获取和设置画布的宽度和高度。

自动宽度和高度仅在加载图像后可用。

Answer 2

该函数试图在加载图像之前获取高度/宽度，因此我得到0x0。要解决此问题，请在调用保存函数之前添加 img.onload 。

function readURL(input, image, width, height) {
            if (input.files && input.files[0]) {

                var reader = new FileReader();

                reader.onload = function (e) {
                    //Save the image
                    var img = new Image();
                    img.src = e.target.result;
                    img.onload = function (e){
                        if (image.id == 'photo1') {
                            save(img, 'image1');
                        }
                        else {
                            save(img, 'image2');
                        }
                    }
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

将图像保存到localstorage - 画布

2 个答案: