Cordova 如何从相机旋转图片

Posted

技术标签:

【中文标题】Cordova 如何从相机旋转图片【英文标题】:Cordova how to rotate a picture from camera 【发布时间】:2015-08-27 06:28:34 【问题描述】:

我用科尔多瓦相机插件拍照 camera.getPicture() 接口

并获得一个 base64 图像我如何将这个 base64 图像向右旋转 90 并获取新的 base64 字符串以保存 我的代码:

Camera.getPicture(options).then(function(imageURI) 
        var img = new Image();
        img.src = "data:image/png;base64," + imageURI;

        var rotate = false;

        if (img.width > img.height) 
            rotate = true;
        

         uploadImage(imageURI, activeIndex, rotate);

    , function(err) 
        console.log(err);
        $ionicLoading.hide();
    );

图片旋转功能

 var rotateImage = function (base64ImageSrc) 
    var canvas = document.createElement('canvas');
    var img = new Image();
    img.src = base64ImageSrc;
    var context = canvas.getContext('2d');

    // translate context to center of canvas
    context.translate(canvas.width / 2, canvas.height / 2);

    // rotate 45 degrees clockwise
    context.rotate(Math.PI / 4);

    console.log(canvas.toDataURL());
    var ImageUrl = canvas.toDataURL();
    ImageUrl = ImageUrl.split("data:image/png;base64,");
    ImageUrl = ImageUrl[1];
    console.log(ImageUrl);
    return ImageUrl;
;

【问题讨论】:

【参考方案1】:

可以使用画布实现图像旋转,

function rotateBase64Image() 
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext("2d");

        var image = new Image();
        image.src = base64data;
        image.onload = function() 
            ctx.translate(image.width, image.height);
            ctx.rotate(180 * Math.PI / 180);
            ctx.drawImage(image, 0, 0); 
            window.eval(""+callback+"('"+canvas.toDataURL()+"')");
        ;

 

base64data:包含base64编码的照片图像[原始图像]的字符串

canvas.toDataURL():旋转图像

Refer

【讨论】:

它的返回图像 base64 字符串但很短,所以看起来没问题

以上是关于Cordova 如何从相机旋转图片的主要内容,如果未能解决你的问题,请参考以下文章

Android相机旋转肖像模式图片

Android将图片旋转90度(由相机拍摄)[重复]

用相机拍照将asset.fullScreenImage旋转90度?

如何实现 Android 相机以任何屏幕方向拍照?

上传到 Firebase 时出现图片方向问题

js获取图片的EXIF,解决图片旋转问题