国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

html5 IOS端上傳圖片角度旋轉

DDreach / 1945人閱讀

摘要:前言近期有個手機端上傳圖片功能的項目,在手機上體驗很好但在手機上,圖片有時會出現角度旋轉。頁面是獲取圖片角度的插件圖片方向角檢查圖片格式請選擇格式的圖片獲取照片方向角屬性需要順時針度旋轉需要逆時針度旋轉需要度旋轉

前言

近期有個手機端html5上傳圖片功能的項目,在android手機上體驗很好但在IOS手機上,圖片有時會出現角度旋轉。google后找到了解決方法,現在總結下供以后使用。

html頁面

exif.js是獲取圖片角度的javascript插件

uploadImage.js
$(".uploadImage input").change(function () {
    selectFileImage($(this)[0]);
});

function selectFileImage(fileObj) {
    var file = fileObj.files[0];
    // 圖片方向角
    var Orientation = null;

    if (file) {
        var rFilter = /^(image/jpeg|image/png)$/i; // 檢查圖片格式

        if (!rFilter.test(file.type)) {
            alert("請選擇jpeg、png格式的圖片");
            return;
        }
        //獲取照片方向角屬性
        EXIF.getData(file, function () {
            EXIF.getAllTags(this);
            Orientation = EXIF.getTag(this, "Orientation");
        });
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var image = new Image();
        image.src = e.target.result;
        image.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
            var base64 = null;
            if (Orientation != "" && Orientation != 1 && Orientation != undefined) {
                var width = this.naturalWidth;
                var height = this.naturalHeight;
                switch (Orientation) {
                    case 6://需要順時針90度旋轉
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(90 * Math.PI / 180);
                        ctx.drawImage(this, 0, -height);
                        break;
                    case 8://需要逆時針90度旋轉
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(-90 * Math.PI / 180);
                        ctx.drawImage(this, -width, 0);
                        break;
                    case 3://需要180度旋轉
                        ctx.rotate(180 * Math.PI / 180);
                        ctx.drawImage(this, -width, -height);
                        break;
                }
            }
            base64 = canvas.toDataURL("image/png");
            $("#myImage").attr("src", base64);
        };
    };
}

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82219.html

相關文章

  • html5 上傳本地圖片處理各種問題

    摘要:原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目,項目要求大概是這樣子上傳手機本地圖片,然后裁剪后加的需求能夠旋轉圖片,用于裁剪后面加的需求填寫各種文字,選擇顏色,之后把文字和個相關的圖片,水印到裁剪的圖片上,上傳服務器生成 原文還是在簡書上: html5 上傳本地圖片處理各種問題 這是最近給公司寫一個項目,項目要求大概是這樣子:1.上傳手機本地圖片,然后裁剪(后加的需...

    iOS122 評論0 收藏0
  • html5 上傳本地圖片處理各種問題

    摘要:原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目,項目要求大概是這樣子上傳手機本地圖片,然后裁剪后加的需求能夠旋轉圖片,用于裁剪后面加的需求填寫各種文字,選擇顏色,之后把文字和個相關的圖片,水印到裁剪的圖片上,上傳服務器生成 原文還是在簡書上: html5 上傳本地圖片處理各種問題 這是最近給公司寫一個項目,項目要求大概是這樣子:1.上傳手機本地圖片,然后裁剪(后加的需...

    Taste 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<