zoukankan      html  css  js  c++  java
  • 在线图片转base64

      function ImgToBase64(url, callback, outputFormat) {  // outputFormat 用于指定输出格式的,遵循 MIME 标准
          var canvas = document.createElement('CANVAS'),
          ctx = canvas.getContext('2d'),
          img = new Image;
          img.crossOrigin = 'Anonymous';
          img.onload = function () {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            const quality = 0. 7;  // 压缩的的关键所在,压缩比例
            var dataURL = canvas.toDataURL(outputFormat || 'image/jpeg',quality );  // 指定输出格式的地方,遵循 MIME 标准
            callback.call(this, dataURL, img);
            canvas = null;
          };
          img.src = url;
        }
        // 调用函数
        ImgToBase64('http://7x2wdd.com2.z0.glb.qiniucdn.com/8eb43ae8fcbc01e130562908e6629bbe?imageMogr2/thumbnail/500%3E', function (base64, img) {
          // Base64DataURL
          img.src = base64;
          document.querySelector('#img').appendChild(img);
        });
    
    • 如此便可以将图片以 base64 的形式展示出来了,至于之后是要保存还是怎么做就随你啦!
    • 这里转自 ting_125的博客

    转本地图片

        function convertImgToBase64(url, callback, outputFormat){ 
            var canvas = document.createElement('CANVAS'); 
            var ctx = canvas.getContext('2d'); 
            var img = new Image; 
            img.crossOrigin = 'Anonymous'; 
            img.onload = function(){
              var width = img.width;
              var height = img.height;
              // 按比例压缩4倍
              var rate = (width<height ? width/height : height/width)/4;
              canvas.width = width*rate; 
              canvas.height = height*rate; 
              ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate); 
              var dataURL = canvas.toDataURL(outputFormat || 'image/png'); 
              callback.call(this, dataURL); 
              canvas = null; 
            };
            img.src = url; 
          }
    
           function getObjectURL(file) {
                var url = null ; 
                if (window.createObjectURL!=undefined) {  // basic
                  url = window.createObjectURL(file) ;
                } else if (window.URL!=undefined) {       // mozilla(firefox)
                  url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL!=undefined) { // web_kit or chrome
                  url = window.webkitURL.createObjectURL(file) ;
                }
                return url ;
          }
         // 前端只需要给input file绑定这个change事件即可(上面两个方法不用管)huodong-msg为input class
          $('.huodong-msg').bind('change',function(event){
                var imageUrl = getObjectURL($(this)[0].files[0]);
                convertImgToBase64(imageUrl, function(base64Img){
                  // base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
                  alert(base64Img);
                  // base64转图片不需要base64的前缀data:image/jpg;base64
                  alert(base64Img.split(",")[1]);
                });
                event.preventDefault(); 
            });
    
    如果你发现你的学习缺乏动力了,那么你只需要在这里调出这篇博客的一大堆毛病并对作者嗤之以鼻,不断抨击作者直到作者的修改让你满意为止,那么你的动力就自然而来了!
  • 相关阅读:
    uva 10491 Cows and Cars
    uva 10910 Marks Distribution
    uva 11029 Leading and Trailing
    手算整数的平方根
    uva 10375 Choose and divide
    uva 10056 What is the Probability?
    uva 11027 Palindromic Permutation
    uva 10023 Square root
    Ural(Timus) 1081. Binary Lexicographic Sequence
    扩展欧几里得(求解线性方程)
  • 原文地址:https://www.cnblogs.com/YMaster/p/7690044.html
Copyright © 2011-2022 走看看