将url获取的图片转换成base64，并判断图片是否旋转

最新推荐文章于 2023-01-11 00:30:12 发布

Skye Lin

最新推荐文章于 2023-01-11 00:30:12 发布

阅读量1.1k

点赞数

分类专栏： js/jquery 文章标签： url base64 Orientation

本文链接：https://blog.csdn.net/skye_95/article/details/100555467

版权

js/jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

项目中遇到从服务器获取的图片发生了逆时针90度的旋转，现在要将其正常显示，想到的办法是：

1.先将url对应的图片转成base64

2.再判断base64图片有怎样的旋转偏差，并进行对应的矫正

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nick getBase64</title>
</head>
<body>
<div><img id="test" src="" alt="" class="img1"/></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../js/exif.js"></script>
<script>

    //将从服务器获取的图片转换成base64
    var getBase64ByUrl = function(src, callback, outputFormat) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', src, true);

        xhr.responseType = 'arraybuffer';

        xhr.onload = function(e) {
            if (xhr.status == 200) {
                var uInt8Array = new Uint8Array(xhr.response);
                var i = uInt8Array.length;
                var binaryString = new Array(i);
                while (i--) {
                    binaryString[i] = String.fromCharCode(uInt8Array[i]);
                }
                var data = binaryString.join('');
                var base64 = window.btoa(data);
                var dataUrl = "data:" + (outputFormat || "image/png") + ";base64," + base64;
                callback.call(this, dataUrl);
            }
        };

        xhr.send();
    }


    getBase64ByUrl("网址", function(url) {
        var image = new Image();
        image.src = url;
        image.onload = function() {
            EXIF.getData(image, function() {
                //判断图片是否旋转
                orient = EXIF.getTag(this, 'Orientation');
                    if(orient==1){
                        rotateBase64Img(url, 180,1, callback)
                    }
            });
        };
    });

    function rotateBase64Img(src, edg,i, callback) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var imgW;//图片宽度
        var imgH;//图片高度
        var size;//canvas初始大小
        if (edg % 90 != 0) {
            console.error("旋转角度必须是90的倍数!");
            throw '旋转角度必须是90的倍数!';
        }
        (edg < 0) && (edg = (edg % 360) + 360)
        const quadrant = (edg / 90) % 4; //旋转象限
        const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标
        var image = new Image();
        image.crossOrigin = "anonymous"
        image.src = src;
        image.onload = function () {
            imgW = image.width;
            imgH = image.height;
            size = imgW > imgH ? imgW : imgH;
            canvas.width = size * 2;
            canvas.height = size * 2;
            switch (quadrant) {
                case 0:
                    cutCoor.sx = size;
                    cutCoor.sy = size;
                    cutCoor.ex = size + imgW;
                    cutCoor.ey = size + imgH;
                    break;
                case 1:
                    cutCoor.sx = size - imgH;
                    cutCoor.sy = size;
                    cutCoor.ex = size;
                    cutCoor.ey = size + imgW;
                    break;
                case 2:
                    cutCoor.sx = size - imgW;
                    cutCoor.sy = size - imgH;
                    cutCoor.ex = size;
                    cutCoor.ey = size;
                    break;
                case 3:
                    cutCoor.sx = size;
                    cutCoor.sy = size - imgW;
                    cutCoor.ex = size + imgH;
                    cutCoor.ey = size + imgW;
                    break;
            }
            ctx.translate(size, size);
            ctx.rotate(edg * Math.PI / 180);
            ctx.drawImage(image, 0, 0);
            var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
            if (quadrant % 2 == 0) {
                canvas.width = imgW;
                canvas.height = imgH;
            } else {
                canvas.width = imgH;
                canvas.height = imgW;
            }
            ctx.putImageData(imgData, 0, 0);
            callback(i,canvas.toDataURL())
        };
    }

    function callback(i,base64data) {
        $('.img'+i).attr('src', base64data);

    }
</script>
</body>
</html>

url网址最好是通过域名访问的，因为我需要遍历，所以加了参数i，不需要的可以去掉。

Skye Lin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
将url获取的图片转换成base64，并判断图片是否旋转

项目中遇到从服务器获取的图片发生了逆时针90度的旋转，现在要将其正常显示，想到的办法是：1.先将url对应的图片转成base642.再判断base64图片有怎样的旋转偏差，并进行对应的矫正代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit...
复制链接

扫一扫