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

       };

问题是＆＃34; var b64str = c.toDataURL("image/jpeg");＆＃34;产生格式错误的字符串，它不是base64。如果我猜我会认为这行不正确，或者我需要在这里添加一些代码将画布转换为base64。格式错误的字符串是＆＃34; data：，＆＃34;，它看起来是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
}

希望将画布转换为base64图像

1 个答案: