相关疑难解决方法(0)

如何在移动网络浏览器中使用输入[type ='file']捕获照片后在画布中以正确的方向绘制照片?

我在移动设备上制作了一个简单的网络应用程序,允许访问者使用html5输入[type = file]元素捕获照片.然后我会在网上显示它以供预览,然后访问者可以选择将照片上传到我的服务器用于其他目的(即:上传到FB)

当我使用iPhone拍照并垂直握持时,我发现照片的方向存在问题.照片的标签方向正确.但是,当我尝试使用drawImage()方法将其绘制到画布中时,它会被旋转90度.

我试图以4个方向拍摄照片,其中只有一个可以在画布上绘制正确的图像,其他图像可以旋转,甚至可以颠倒翻转.

好吧,我很困惑,以正确的方向来解决这个问题...感谢您的帮助......

这是我的代码,主要来自MDN的副本

<div class="container">
            <h1>Camera API</h1>

            <section class="main-content">
                <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>

                <p>
                    <form method="post" enctype="multipart/form-data" action="index.php">
                        <input type="file" id="take-picture" name="image" accept="image/*">
                        <input type="hidden" name="action" value="submit">
                        <input type="submit" >
                    </form>
                </p>

                <h2>Preview:</h2>
                <div style="width:100%;max-width:320px;">
                    <img src="about:blank" alt="" id="show-picture" …
Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas drawimage html5-canvas

64
推荐指数
3
解决办法
5万
查看次数

获取图像方向并按方向旋转

使用以下代码获取图像方向时出现问题

    string fileName = @"D:\...\...\01012015004435.jpeg";

    int rotate = 0;
    using (var image = System.Drawing.Image.FromFile(fileName))
    {
        foreach (var prop in image.PropertyItems)
        {
            if (prop.Id == 0x112)
            {
                if (prop.Value[0] == 6)
                    rotate = 90;
                if (prop.Value[0] == 8)
                    rotate = -90;
                if (prop.Value[0] == 3)
                    rotate = 180;
                prop.Value[0] = 1;
            }
        }
    }
Run Code Online (Sandbox Code Playgroud)

在获得正确的方向后,我习惯像旋转图像一样

private static RotateFlipType OrientationToFlipType(string orientation)
{
    switch (int.Parse(orientation))
    {
        case 1:
            return RotateFlipType.RotateNoneFlipNone;
            break;
        case 2:
            return RotateFlipType.RotateNoneFlipX;
            break;
        case 3:
            return RotateFlipType.Rotate180FlipNone;
            break;
        case 4: …
Run Code Online (Sandbox Code Playgroud)

c#

22
推荐指数
3
解决办法
2万
查看次数

标签 统计

c# ×1

canvas ×1

drawimage ×1

html5 ×1

html5-canvas ×1

javascript ×1