img圖片轉成base64

時間 2019-11-18

標籤 img 圖片轉成 base64 base 欄目 HTML 简体版

原文原文鏈接

方法一:canvasjavascript

<script type="text/javascript">
        var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
        //var img = "http://127.0.0.1/base64/1.jpg";
        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
            var dataURL = canvas.toDataURL("image/" + ext);
            return dataURL;
        }
        var image = new Image();
        image.crossOrigin = '';
        image.src = img;
        image.onload = function () {
            var base64 = getBase64Image(image);
            console.log(base64);
        }
    </script>

方法二:FileReaderhtml

<html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     <title>經過filereader接口讀取文件</title>
     <script type="text/javascript">
         function readAsDataURL()
         {
             if(typeof FileReader=='undifined')          //判斷瀏覽器是否支持filereader
             {
                 result.innerHTML="<p>抱歉，你的瀏覽器不支持 FileReader</p>";
                 return false;
             }
             var file=document.getElementById("imagefile").files[0];
             if(!/image\/\w+/.test(file.type))           //判斷獲取的是否爲圖片文件
             {
                 alert("請確保文件爲圖像文件");
                 return false;
             }
             var reader=new FileReader();
             reader.readAsDataURL(file);
             reader.onload=function(e)
             {
                 var result=document.getElementById("result");
                 result.innerHTML='<img src="'+this.result+'" alt=""/>'
             }
        }
     </script>
 </head>
<body>
 <p>
     <label>請選擇一個文件：</label>
     <input type="file" id="imagefile" />
     <input type="button" value="讀取圖像" onClick="readAsDataURL();" />
 </p>
 <div name="result" id="result">
     <!-- 這裏用來顯示圖片結果-->
 </div>
 </body>
 </html>

參考：https://cloud.tencent.com/developer/article/1399137
http://www.javashuo.com/article/p-fkyosogz-v.htmljava

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。