js img轉換base64

時間 2019-11-24

原文原文鏈接

本文來自 http://www.cnblogs.com/taxi/p/7717486.htmljavascript

徹底複製粘貼，就爲了之後能快速的找到地方抄代碼，這一塊也是屬於我常常忘掉的一塊。html

方法一:canvasjava

<script type="text/javascript">
        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 dataURL = canvas.toDataURL("image/png");
            return dataURL
            // return dataURL.replace("data:image/png;base64,", "");
        }


        function main() {
            var img = document.createElement('img');
            img.src = './images/Game of Thrones.jpg';  //此處本身替換本地圖片的地址
            img.onload =function() {
                var data = getBase64Image(img);
                var img1 = document.createElement('img');
                img1.src = data;
                document.body.appendChild(img1);
                console.log(data);
            }
        }
        main()
    </script>

方法二:FileReader (推崇這種)canvas

<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>

1. img 轉爲base64
2. img 轉base64
3. js 圖片轉換base64 base64轉換爲file對象
4. img圖片轉成base64
5. base64轉碼(JS)
6. js轉換字符串爲base64位
7. js 圖片與base64互相轉換
8. js將圖片轉換爲base64
9. js,JQ 圖片轉換base64 base64轉換爲file對象,blob對象
10. 圖片url轉換成base64，base64轉file
更多相關文章...
• XSLT - 轉換 - XSLT 教程
• C# 類型轉換 - C#教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• Java 8 Stream 教程

相關標籤/搜索

每日一句

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