JS前端上傳圖片、壓縮、而且處理旋轉問題，生成base64數據

時間 2019-11-13

標籤前端上傳圖片壓縮而且處理旋轉問題生成 base64 base 數據欄目 JavaScript 简体版

原文原文鏈接

簡介

JS前端上傳圖片、壓縮、而且處理旋轉問題，生成base64數據javascript

演示地址

http://www.tkc8.com/test/pic/index.htmlhtml

代碼

https://github.com/big-sponge/js-image-base64前端

示例代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>image-test</title>
    <meta charset="utf-8"/>
    <script src="jquery-2.1.4.js" type="text/javascript"></script>
    <script src="base64image.js" type="text/javascript"></script>
    <script src="exif.js" type="text/javascript"></script>  
</head>
<body>
<input type="file" style="display: none" onchange="fileUp(this)" id="file-up">
<input type="button" value="點我上傳圖片"  onclick="$('#file-up').click();" />
<div id='image-list'>
</div>
    <script>
        var fileUp = function (me) {
            base64Image({
                file: me,                              /*【必填】對應的上傳元素 */
                callback: function (imageUrl) {        /*【必填】處理成功後的回調函數 */
                    /*imageUrl爲獲得的圖片base64數據，這裏能夠進行上傳到服務器或者其餘邏輯操做 */
                    var img = new Image();
                    img.src = imageUrl;
                    $("#image-list").append(img);       
                },
                width:750,                          /*【選填】寬度默認750，若是圖片尺寸大於該寬度，圖片將被設置爲該寬度*/
                ratio:0.75,                         /*【選填】壓縮率默認0.75 */
            });
        };
    </script>
</body>
</html>

相關標籤/搜索