设置base64图像javascript的大小-angularjs [英] set size of a base64 image javascript - angularjs

问题描述

我看到了很多答案，但是我没有找到一个好的解决方案:

I saw many answers but I didn't find a good solution for this:

我的$ scope.file =/9j/4VeIRXhpZgAASUkqAAgAAAAL [..]中有图片 大小为5217984 = 5 MB

I have a picture in my $scope.file = /9j/4VeIRXhpZgAASUkqAAgAAAAL [..] And it size is 5217984 = 5 MB

但是这张照片太大了，我的角度应用/Web服务不支持它.

But this picture is só big and my angular aplication/web service is not supporting it.

我该怎么办?如何?

我正在尝试将这5 MB的图像转换为500 KB的图像，但没有得到.有人可以帮我吗?

I'm trying to convert this 5 MB image to a image with 500 KB but I didn't get it. Can anyone help my please?

我不知道是否可能，但是我需要JavaScript中的一个函数来将5MB图像转换为具有500KB的图像，例如，我可以将其放大.

I don't know if it its possible, but I need a function in javascript to convert that 5MB image to a image with 500 KB for example, and I can riseze it.

当我放置一个具有500 KB fir示例的图像时，这一切在我的应用程序中都正确.

And its everything right in my application when I put a image with 500 KB fir example.

推荐答案

    var $scope.getData= function () {

        var reader = new FileReader();
        reader.onload = $('input[type=file]')[0].files;
        var img = new Image();
        img.src =(reader.onload[0].result);
            img.onload = function() {
                if(this.width > 640)
                {
                    //Get resized image
                    img= imageToDataUri(this, 640, 480);
                }
            }   
    };

    //Resize the image (in the example 640 x 480px)
    function imageToDataUri(img, width, height) {

        // create an off-screen canvas
        const canvas = document.createElement('canvas'),
        const ctx = canvas.getContext('2d');

        // set its dimension to target size
        canvas.width = width;
        canvas.height = height;

        // draw source image into the off-screen canvas:
        ctx.drawImage(img, 0, 0, width, height);

        // encode image to data-uri with base64 version of compressed image
        return canvas.toDataURL();
    }

这篇关于设置base64图像javascript的大小-angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！