相关疑难解决方法(0)

我想根据相机在JPEG EXIF图像数据中设置的原始旋转来旋转照片.诀窍是所有这一切都应该在浏览器中使用JavaScript和<canvas>.

JavaScript如何访问JPEG,本地文件API对象,本地<img>或远程<img>,EXIF数据来读取旋转信息？

服务器端的答案不对; 我正在寻找客户端解决方案.

TL; DR;

有没有办法在上传之前直接在浏览器端压缩图像(主要是jpeg,png和gif)？我很确定JavaScript可以做到这一点,但我找不到实现它的方法.

这是我想要实现的完整场景:

• 用户访问我的网站,并通过input type="file"元素选择图像,
• 这个图像是通过JavaScript检索的,我们做了一些验证,如正确的文件格式,最大文件大小等,
• 如果一切正常,页面上会显示图像的预览,
• 用户可以进行一些基本操作,例如将图像旋转90°/ -90°,按照预定义的比例裁剪等,或者用户可以上传另一张图像并返回步骤1,
• 当用户满意时,编辑后的图像会被压缩并在本地"保存"(不保存到文件中,但在浏览器内存/页面中), -
• 用户填写表格,其中包含姓名,年龄等数据,
• 用户单击"完成"按钮,然后将包含数据+压缩图像的表单发送到服务器(不带AJAX),

直到最后一步的完整过程应该在客户端完成,并且应该与最新的Chrome和Firefox,Safari 5+和IE 8+兼容.如果可能,只应使用JavaScript(但我很确定这是不可能的).

我现在没有编码任何东西,但我已经考虑过了.可以通过File API在本地读取文件,可以使用Canvas元素完成图像预览和编辑,但是我找不到一种方法来执行图像压缩部分.

根据html5please.com和caniuse.com,支持这些浏览器非常困难(感谢IE),但可以使用FlashFanvas和FileReader之类的polyfill来完成.

实际上,目标是减小文件大小,因此我将图像压缩视为一种解决方案.但是,我知道上传的图像将在我的网站上显示,每次都在同一个地方,我知道这个显示区域的尺寸(例如200x400).因此,我可以调整图像大小以适应这些尺寸,从而减小文件大小.我不知道这种技术的压缩率是多少.

你怎么看 ？你有什么建议告诉我吗？你知道在JavaScript中压缩浏览器图像的方法吗？谢谢你的回复.

我在移动设备上制作了一个简单的网络应用程序,允许访问者使用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" …

我知道在浏览器中禁用了JPG文件的自动轮换.

他们无法启用它,因为它会破坏某些网站的布局.

有CSS属性吗？或javascript代码来实现？或者是其他东西？或者这个问题的解决方案还不存在？

问题

我正在创建多个图表,然后发送到服务器以创建PDF.这些数据可能会变大.

题

压缩图像数据并将其发送到服务器的最佳方法是什么

背景

我正在创建的图表相当复杂,为了省去自己的头痛,所有这些都被转换为生成base64数据uri的画布.目前,数据uri被发布到服务器以处理处理.对于小图表,发布信息可以相当大,大约400-600kb,对于最大图表,大小为12mb.

图表是可以操作/重新排序的组织结构图.

在将这些字符串发送回服务器之前是否有更好的压缩方法？

研究

我看过的一些东西:

https://github.com/brunobar79/JIC/blob/master/src/JIC.js(看起来不像只是调整大小的选项)

http://pastebin.com/MhJZBsqW(看起来很有趣)

但是引用了我找不到的外部库: C_H_Image Lib_MinifyJpeg

https://code.google.com/p/jslzjb/source/browse/trunk/Iuppiter.js?r=2(看起来这可行,但依赖于服务器端的解压缩)

我开发了一个 Laravel Web 应用程序，它具有接受用户上传的图像然后显示它的功能。我在测试时遇到了一个问题，因为使用手机上传的照片逆时针方向旋转了 90 度，我使用图像干预来解决这个问题。但是当我使用 javascript 向用户显示上传图像的预览时，图像旋转了 90 度，但是当我保存图像时它变得正确。我的 javascript 代码是

    function imagePreview(input,elm) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(elm).css("background-image","url('"+e.target.result+"')");
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#settings_img").on("change",function(){
        imagePreview(this,"#settings_img_elm");
    });

任何人都可以通过编辑上面的代码来帮助我正确定位预览图像，以便在需要时更改图像的方向。

我能够将我的桌面上的图像上传到基于Angular的Web应用程序,而不会出现问题,但是如果我从手机(如iPhone)上传,请使用"拍摄照片或视频"或"照片库"功能,当在横向拍摄时,它会导致图像在纵向拍摄时或横向拍摄.这是我目前的上传功能.任何线索/让其他人都有同样的问题从iPhone /移动电话上传到移动Web应用程序到SharePoint库？

这是我的上传功能:

  // Upload of images
    $scope.upload = function () {
        //console.log($scope.files);
            if (document.getElementById("file").files.length === 0) {
                alert('No file was selected');
                return;
            }
            var parts = document.getElementById("file").value.split("\\");
            var uploadedfilename = parts[parts.length - 1];
            var basefilename = uploadedfilename.split(".")[0];
            var fileextension = uploadedfilename.split(".")[1];
            var currentdate = new Date();
            var formatteddate = $filter('date')(new Date(currentdate), 'MMddyy-hmmssa');
            var filename = basefilename + formatteddate + '.' + fileextension;
            var file = document.getElementById("file").files[0];
            uploadFileSync("/sites/asite", "Images", filename, file);
        }

        //Upload file synchronously
    function uploadFileSync(spWebUrl, library, filename, file) …

我们正在开发一个PhoneGap应用程序,在正在开发的核心功能中,它还具有用户配置文件部分.在该屏幕/部分内,我们允许用户更新各种细节,包括他们的个人资料图像.配置文件图像可以与相机一起拍摄(效果很好),也可以从用户照片库中选择.这就是我们的问题所在.

我们正在使用该navigator.camera.getPicture功能从用户相机或相机胶卷加载照片.

然后我们创建一个新的Image()并将imageURI手机间隙返回设置为图像src.在onload图像的功能中,我们将图像绘制到画布上下文中以调整大小并将其裁剪为正方形.

我们的图像有问题,当渲染图像被压扁但我们已经在这篇文章的帮助下解决了这个问题(HTML5 Canvas drawImage ratio bug iOS)

问题:一切运作良好时,我们直接从相机获得的图像,但是当我们设置destinationType到navigator.camera.PictureSourceType.SAVEDPHOTOALBUM或navigator.camera.PictureSourceType.PHOTOLIBRARY拍摄的图像进行旋转不正确.

correctOrientation 被设置为true.

我们正在使用Cordova 2.8

当designationType是,我们只能得到图像数据,FILE_URI摄像头和NATIVE_URI为PHOTOLIBRARY.这种差异可能与我们的问题有关吗？

代码是:

navigator.camera.getPicture(function (imageURI) {

context = // 2d context from canvas object in the DOM

base_image = new Image();
base_image.onload = function () {

var x = 0;
var y = 0;
var w = 144;
var h = …

如何更改上传到 Firebase 存储的图像的方向？

我相信图像具有描述图像方向的 exif 数据。我怎样才能改变这个？

我在网站上使用输入字段,以便用户可以自己拍照.

在iPad,iPhone上,生成的图片是颠倒的.如何轻松检测用户是否使用相机以便通过Javascript旋转图像？

我之后在Javascript Canvas中使用该图片.

我得到了这个输入字段:

<div class="input-field">
    <label>Choose image or take a picture :</label>
    >input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
</div>

在JS中:

var imageLoader;
imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', _handleImage, false);

function _handleImage( e ){

    var reader = new FileReader();

    reader.onload = function(event){

        picture.onload = function(){
           // The image here is upside down :( I want to turn it to 180 degrees here
           do_stuff( );

        };

        picture.src = event.target.result;

    };
    reader.readAsDataURL(e.target.files[0]);
}

我正在尝试制作一个小画布功能，该功能可以让您上传图片并在其上添加覆盖。我可以上传，在顶部创建图片并下载，但是当我尝试通过电话上传图片时。它将图像旋转90度。

我在这里想念什么吗？在将图像添加到画布之前，是否需要测试图像的大小并对其进行缩放。

任何帮助将是很大的帮助，谢谢。

  <style>
    .box{
        width: 300px;
        height: 300px;
        border: 1px solid blue;
        padding: 1em;
    }
    .wrap{
        width: 180px;
        height: 180px;
        margin: 0 auto;
        background: red;
        position: relative;
    }
</style>
        <div class="box">
        <div class="wrap">
            <canvas id="canvas" width="180" height="180"></canvas>
        </div>
        <br />
        <label>Image File:</label><br/>
        <input type="file" id="imageLoader" name="imageLoader"/>
        <br />
        <br />
        <a href="#" clss="buttonLink" id="downloadLink">Download!</a>
    </div>
    <script>


        $(document).ready(function() {
            //upload images.
            var imageLoader = document.getElementById('imageLoader');
            imageLoader.addEventListener('change', handleImage, false);
            //draw image.
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            //download link. …

在页面:https://legionhdk.pl/profil-krwiodawcy/donacje/donacja/3406-robert-kowalewski-08-09-2018有div图像:https://legionhdk.pl/images/leg/donacje /752-IMG-3273.JPG背景:

.foto {
  width:200px;
  height:200px;
  background-size:contain;
}

<div class="foto" style="background-image:url('https://legionhdk.pl/images/leg/donacje/752-IMG-3273.JPG')"></div>

当我在任何浏览器中打开图像时,它看起来还不错,但是当它在背景中时,它就会被激活.问题是为什么？这个地方的一些照片还可以,但其中一些是旋转的.