HTML5實現圖片上傳2

weixin_33797791發表於2017-10-30
HTML
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        #canvas {
            background-color: skyblue;
        }
    </style>
    <title>Document</title>
</head>
<body>

<input type="file" value="file" multiple id="imgFile">

<img src="" alt="">
<canvas width="600" height="600" id="canvas"></canvas>
</body>
</html>
<script src="./jquery.js"></script>

<script>
    /*
    * canvas.getContext('2d')
    * 返回一個用於在canvas畫布上繪圖的環境物件
    * 當前唯一的合法值是2d，指定二維繪圖並返回一個環境物件(canvas目前不支援3d繪圖)
    * 該物件匯出一個二維繪圖的API
    * */
    var ctx = document.querySelector("#canvas").getContext('2d')

    var url = "";

    $('input[type=file]').change(function () {
        console.log(this.files)

        var file = this.files[0];

        var reader = new FileReader();

//      讀取圖片轉化為base64格式輸出
        reader.readAsDataURL(file);

        reader.onload = function () {

            url = reader.result;

            /*
            注意在使用canvas時不要使用JQuery，$物件上沒有canvas的方法
            使用$獲取元素然後傳入canvas方法中會報錯
            var imgObj=document.querySelector("img")
            ctx.drawImage(imgObj, 0, 0, 90, 90)
            * */
            var img = new Image();
//         在某些瀏覽器中如果圖片沒有載入完成，使用drawImage會報錯
//         所以我們最好確保圖片載入完成再使用該方法，所以使用onload
            img.onload = function () {
                /**
                 * ctx.drawImage()
                 * ctx.drawImage(image, dx, dy, dWidth, dHeight);
                 * 傳入4個引數
                 * image 影像物件，表示要繪製到畫布中的物件
                 * dx 目標物件在畫布上距離x軸的位置
                 * dy 目標物件在畫布上距離y軸的位置
                 * dWidth 在畫布上繪製的目標物件的寬度，如果不設定，在繪製圖片時寬度不會改變
                 * dHeight 在畫布上繪製的目標物件的高度，如果不設定，在繪製圖片時高度不會改變
                 * 以上4個是我們將圖片繪製到畫布時的基本引數，後兩個是可選引數
                 * 接下來我們來看一下如何canvas對影像進行裁剪
                 *  ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
                 *  dx, dy, dWidth, dHeight這4個引數作用不變
                 *
                 *  sx sy 用來指定我們要裁剪圖片的那部分的起始位置
                 *  sWidth sHeight 用來指定我們要裁剪圖片從起始位置開始的寬度和高度
                 *  圖片被裁剪完成後會放入到我們通過dx, dy, dWidth, dHeight設定的畫布中
                 *  可以想象成從原圖中取出一個矩形區域然後放到畫布上的目標區域中
                 *  如果覺的canvas的理解方式不好理解，我們可以將其抽象為我們常見的div+backgroundImg
                 *  將canvas整體理解為body
                 *  在設定8個引數的情況下
                 *  dx, dy, dWidth, dHeight用來設定div大小，位置
                 *  sx, sy, sWidth, sHeight用來設定背景圖片和div的關係
                 *  具體可以使用這段程式碼配合下面的圖片來使用
                 */

                ctx.drawImage(img, 332, 660, 280, 422, 0, 0, 280, 422)
//              - - 隨手按MDN上畫了個折線
                ctx.beginPath()
                ctx.moveTo(30, 96)
                ctx.lineTo(70, 66)
                ctx.lineTo(103, 76)
                ctx.lineTo(170, 15);
                ctx.stroke();
            }
            img.src = url
        };
    });
 /*
    * 我們要獲取canvas中的資訊，用toDataURL就可以轉換成DataURL，然後可以取出其中的base64資訊
    * base64的格式為data:image/png;base64,*******
    * 逗號之前都是一些說明性的文字
    * 如果我們只需要之後的文字
    * data=data.split(",")[1]
    * 接下來將圖片上傳到伺服器即可
    * */
    var data=document.querySelector("#canvas").toDataURL();
    /*
    * 雖然這裡沒有用到，但是還是說一下
    * 在HTML5中，新增加了兩個用來判斷圖片寬度和高度的屬性
    * naturalWidth，naturalHeight
    * 這兩個屬性會返回圖片的真實的寬度和高度
    * 也就是說我們獲取到的是圖片原始的寬度和高度，而不是我們在引入頁面後設定的高度
    * 之前我們使用.width和.height獲得的都是設定之後的寬高
    * */
</script>

使用影像 Using images

2808208-2f0e319482390a32.jpg
21643957_1370325500325.jpg

相關文章