HTML5 js Compress pictures and get pictures BASE64 code upload _javascript Tips

This example for you to share the HTML5 JS compression pictures, and get pictures BASE64 code upload method for your reference, the specific content as follows

Basic process

1) Call the FileReader Reader.readasdataurl (IMG); method, in its OnLoad event, to read the user-selected picture into the Image object.

2 in the OnLoad event of the image object, the image change size is drawn to the canvas through the DrawImage method of the canvas Canvas.getcontext (' 2d ').

3) through Canvas.todataurl ("Image/jpeg", 0.1); method to turn the picture into a base64 string and into the service side.

var vueimg = new Vue ({el: "#divCarImages", data: {model: {carid: ' @carId ', Imagetitle: ', img64: '}, Images: [

        ]}, methods: {imagehandle:function () {var fup = $ ("#fileImg") [0];

        var img = fup.files[0];
        var image = new Image ();
        var canvas = $ ("#canvas") [0];//document.createelement ("canvas");

        var ctx = Canvas.getcontext (' 2d ');

          Image.onload = function () {var w = image.naturalwidth, h = image.naturalheight;
          var tosize = 400;
          Canvas.width = tosize;

          Canvas.height = tosize;
          var w2 = tosize, H2 = tosize;
          if (W > h) {h2 = h/w * tosize;
          else {w2 = w/h * tosize;
           
        Ctx.drawimage (image, 0, 0, W, h, 0, 0, W2, H2);
        //Judge if picture if (!img) {return; //Judge Picture format if (!) ( Img.type.indexOf (' image ') = = 0 && Img.type &&/\.
          (?: jpg|png|gif) $/.test (img.name))) {alert (' picture can only be jpg,gif,png ');
        Return

        var reader = new FileReader ();
          Reader.onload = function (e) {//reader onload start var url = reader.result;

        image.src = URL;
      //Reader onload end Reader.readasdataurl (IMG);

 }

    }
  });

function uploadimg () {
    var canvas = $ ("#canvas") [0];
    vueImg.model.img64 = Canvas.todataurl ("Image/jpeg", 0.1);
    $ ("#testMsg"). HTML (imgdata.length);
           
    Ajax upload picture
    $.post ("@Url. Content (" ~/alioss/savecarimage ")", Vueimg.model, function (ret) {

      Parseajaxdata ( data, function (model) {
        Console.log (model). Path);
        Alert (model. Path);
        $ (' #showimg '). html ('  ');}    
    }, ' json '}
  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.