Question

我想上传一张图片，并使用fabric.js在一个地方进行转换。由于我没有可用的服务器，因此必须使用本地存储。

使用fabric js我想放大和旋转图像。（如果有更好的选择，请告诉我，因为结构教程很少，而且不是最好的：/。）

概括地说，我的问题是：如何从网站上的用户PC“编辑”图像（例如旋转等）？

我尝试了多个JS库，例如dropzone.js，fineuploader，uploadcare或小提琴，例如：http://jsfiddle.net/8V9w6/，还尝试了fabric.js的替代方案，例如jquery dragable。

但是他们都没有按照我的要求工作。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
        function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails.
 for (var i = 0, f; f = files[i]; i++) { // Only process image files.
 if (!f.type.match('image.*'))
            {
                continue;
            }
            var reader = new FileReader(); // Closure to capture the file information. 
reader.onload = (function(theFile) { return function(e) { // Render thumbnail. 
var span = document.createElement('span'); 
span.innerHTML = ['<img class="thumb"
            src = "', e.target.result,
            '" title="', escape(theFile.name), '" />'].join('');
        document.getElementById('list').insertBefore(span, null);
        localStorage.setItem('img', e.target.result);
        };
        })(f); // Read in the image file as a data URL.
 reader.readAsDataURL(f);
        }
        }
        document.getElementById('files').addEventListener('change', handleFileSelect, false);
        if (localStorage.img) {
            var span = document.createElement('span');
            span.innerHTML += ['<img class="thumb" src="', localStorage.img,
                '" title="test" />'
            ].join('');
            document.getElementById('list').insertBefore(span, null);
        }
    </script>
    <style>
        .thumb {
            height: 75px;
            border: 1px solid #000;
            margin: 10px 5px 0 0;
        }
    </style>
    <title> Document </title>
</head>

<body>
    <input type="file" id="files" name="files[]" multiple />
    <output id="list">
    </output> </body>

</html>

使用我尝试过的小提琴，我可以得到图像的名称，但是它没有显示在页面上。

如何将图片上传到我的网站并与Fabric JS一起使用？

0 个答案: