希望将画布转换为base64图像

Question

我有这段代码可以从本地文件系统读取文件（图像），并且我想调整图像的大小，以便可以将其以较小的格式上传到服务器。 我遇到的问题是我无法弄清楚如何还原它并将其转换回base64，这样我就可以将该base64字符串发送到Cloudinary服务器。 该文件的大小实际上已经超过2兆字节，并且我相信如果我调整文件大小可以将其减少到不到一半MB。

      $scope.addLocalImage = function (file) {

             var reader = new FileReader();

             reader.onload = function () {

                var tempImage = new Image();
                tempImage.src = reader.result; // to get the base64 result

                var height = tempImage.height;
                var width = tempImage.width;
                if (height > 100) { // max height for our purposes is 100 pixels
                    width = width / (height / 100);
                    height = 100;
                }
                if (width > 150) { // max width for our purposes is 150 pixels
                    height = height / (width / 150);
                    width = 150;
                }
                var c = document.createElement('canvas');
                c.width = width;
                c.height = height;
                var ctx = c.getContext("2d");
                ctx.drawImage(tempImage, 0, 0, width, height);
                var b64str = c.toDataURL("image/jpeg"); // this is not base64, how can I get a base64 string?


                var localImage = {
                    originalImageURL: b64str,
                    origin: "local",
                    imageObject:{
                        result: b64str
                    }
                };

                $scope.suggestedImages.push(localImage);
                $scope.selectImage($scope.suggestedImages.length - 1); // Select new image
                $scope.$apply();

            };

            reader.readAsDataURL(file); //this initiates the loading of file to browser

       };

问题是“ var b64str = c.toDataURL("image/jpeg"); “生成格式错误的字符串，而不是base64。 如果我想我会认为这行是不正确的，或者我需要在此处添加一些代码以将画布转换为base64。 格式错误的字符串是“ data :,”，它看起来是base64字符串的开头，但是被截断了

Answer 1

图片需要一个onload处理程序，因此在图片加载之前不会绘制到画布上

$scope.addLocalImage = function (file) {
     var reader = new FileReader();

     reader.onload = function () {
        var tempImage = new Image();

        tempImage.onload = function() {
            var height = tempImage.height;
            var width = tempImage.width;
            if (height > 100) { // max height for our purposes is 100 pixels
                width = width / (height / 100);
                height = 100;
            }
            if (width > 150) { // max width for our purposes is 150 pixels
                height = height / (width / 150);
                width = 150;
            }
            var c = document.createElement('canvas');
            c.width = width;
            c.height = height;
            var ctx = c.getContext("2d");
            ctx.drawImage(tempImage, 0, 0, width, height);
            var b64str = c.toDataURL("image/jpeg");

            var localImage = {
                originalImageURL: b64str,
                origin: "local",
                imageObject:{
                    result: b64str
                }
            };

            $scope.suggestedImages.push(localImage);
            $scope.selectImage($scope.suggestedImages.length - 1); // Select new image
            $scope.$apply();
        }
        tempImage.src = reader.result; // to get the base64 result
    }
    reader.readAsDataURL(file); //this initiates the loading of file to browser
}