I want to resize and upload the images taken with the camera.

Hello.

I use monaca and Nifty mobile backend to create apps.
I am creating an app to view photo galleries and manage them.

I was writing the part to upload the image of the app managed by another person.
I will upload the image of the smartphone with several MB, so when viewing it on the photo gallery side,
It takes a lot of time and is not practical.

Before uploading, I would like to resize the image ratio and upload it.

I would appreciate it if you could let me know if you have any other good ideas.
Below are some of the code you are uploading.

Thank you for your cooperation.

// Image selection/camera activation
    $scope.showDialog=function(val){
        if(val==0){
            // Select and retrieve images
            varopt={
                quality —50,
                encodingType —Camera.EncodingType.JPEG,
                destinationType:Camera.DestinationType.DATA_URL,
                sourceType —Camera.PictureSourceType.PHOTOLIBRARY
            };
        } else{
            // Take a picture with a camera and get it
            varopt={
                quality —50,
                encodingType —Camera.EncodingType.JPEG,
                destinationType:Camera.DestinationType.DATA_URL,
                sourceType —Camera.PictureSourceType.CAMERA
            };
        }

        navigator.camera.getPicture(onSuccess, onFail, opt);
    };

    function onSuccess(data){
        $scope.img64 = data;
        document.getElementById('new_img').src='data:image/jpeg;base64,'+data;
    }

    function onFail() {
        // error
    }

    // addition
    $scope.add=function(){
        if( document.getElementById('new_img').src!="images/no-image.png"){
            varfile=toBlob($scope.img64);
            varfileNam=ImgBaseNam+no+".jpg";

            varncmbFile=newNCMB.File(fileNam,file);

            ncmbFile.save().then(function(){
                // Upload Successful
                varObj=NCMB.Object.extend(imgClassNam);
                varobj = new Obj();

                varToday=new Date().toLocaleDateString();

                obj.save(null, {
                    success: function(obj){

                    alert("Your data has been saved.");

                    },
                    error: function(obj, error) {
                        alert("Save data failed., error code: "+ error.message);
                    }
                });
            }, function(error){
                // Upload failed
                alert(error.message);
            });
        }
    };

javascript monaca

2022-09-30 16:55

2 Answers

You can use <canvas> to shrink image data in HTML/JavaScript.
After drawing on Canvas in reduced size, it feels like getting Canvas itself as image data.

Moving Demo: http://jsbin.com/bojowaseji/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <metacharset="utf-8">
  <title> JS Bin</title>
</head>
<body>
  <input type="file" onchange="onInputChanged(event)">
  <hr>Original size: <br>
  <img id="previewLarge">
  <hr> Reduced size: <br>
  <img id="previewSmall">
  
  <script>
    function onInputChanged(e){
      var file=e.target.files&e.target.files[0];
      if(file!=null){
        var reader = new FileReader();
        reader.onload=onImageLoad;
        reader.readAsDataURL(file);
      }
    }
    function onImageLoad(e){
      var largeData=e.target.result;
      varsmallData=makeSmall(largeData);
      previewLarge.src=largeData;
      previewSmall.src=smallData;
    }
    
    // Reduce and return image data (DataURL)
    function makeSmall(data){
      // obtain the vertical and horizontal sizes of image data
      var image = document.createElement('img');
      image.src=data;
      varwidth = image.naturalWidth;
      var height = image.naturalHeight;

      // Shrink. This time, 1/2 each.
      varcanvas= document.createElement('canvas');
      canvas.width = width/2;
      canvas.height=height/2;
      canvas.getContext("2d").drawImage(image,0,0,width/2,height/2);
      return canvas.toDataURL();
    }
  </script>
</body>
</html>

Sample Code:

 // Shrink and return image data (DataURL)
function makeSmall(data){
  // obtain the vertical and horizontal sizes of image data
  var image= document.createElement("img");
  image.src=data;
  varwidth = image.naturalWidth;
  var height = image.naturalHeight;

  // Shrink. This time, 1/2 each.
  varcanvas= document.createElement("canvas");
  canvas.width = width/2;
  canvas.height=height/2;
  canvas.getContext("2d").drawImage(image,0,0,width/2,height/2);

  // There is also a toBlob() method that returns a data URL and a binary.
  return canvas.toDataURL();
  // I think the JPEG format provides a better compression rate.
  // The second argument is the quality level, a number between 0.0 and 1.0.The higher the price, the higher the quality.
  // return canvas.toDataURL("image/jpeg", 0.5);
}

2022-09-30 16:55

Mysticatea, I don't have enough credibility, so I'll write in the answer section (

)

ToDataURL is uncompressed png format output by default, so jpeg output is recommended for capacity reduction purposes.

varpng_img=canvas.toDataURL();
var jpeg_img = canvas.toDataURL('image/jpeg');
if(png_img.length>jpeg_img.length){
 /*jpeg is lighter*/
} else {
 /* png is lighter or pngized without jpeg output, etc.
}

2022-09-30 16:55

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656