25

我目前正在为网络打印、海报打印应用程序开发解决方案。

我想包括的功能之一是在继续订购所述图像的海报之前“编辑”(裁剪/缩放/旋转)给定图像的能力。

为了避免用户在编辑之前将图像上传到远程服务器的要求,我想知道以下几点:

是否可以(使用 JavaScript)将存储在客户端计算机上的图像加载到浏览器/浏览器内存中进行编辑,而无需将图像上传到远程服务器?如果是这样,这是如何完成的?

谢谢,

BK

4

3 回答 3

12

无需用户将图像上传到服务器即可编辑图像。

看看下面的链接。它可以很容易地完成。

使用 Javascript 读取本地文件

于 2012-07-15T06:46:01.390 回答
2

是的你可以!但为了做到这一点,浏览器必须支持本地存储!它是 HTML5 api,因此大多数现代浏览器都可以做到!请记住,localstorage 只能保存字符串数据,因此您必须将图像更改为 blob 字符串。你的图像源看起来像这样

这是一个简短的片段,可以帮助你!

                if(typeof(Storage)!=="undefined"){

                // here you can use the localstorage
                // is statement checks if the image is in localstorage as a blob string
                if(localStorage.getItem("wall_blue") !== null){

                var globalHolder = document.getElementById('globalHolder');
                var wall = localStorage.getItem('wall_blue');
                globalHolder.style.backgroundImage= "url("+wall+")";


                 }else{

                // if the image is not saved as blob in local storage
                // save it for the future by the use of canvas api and toDataUrl method
                var img = new Image();
                img.src = 'images/walls/wall_blue.png';
                img.onload = function () {

                var canvas = document.createElement("canvas");
                canvas.width =this.width;
                canvas.height =this.height;

                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0);
                var dataURL = canvas.toDataURL();
                localStorage.setItem('wall_blue', dataURL);

                };

            }}else{//here  you upload the image without local storage }

希望你会发现这个简短的片段很有用。记住 Localstorage 只保存字符串数据,所以你不能

哦,顺便说一句,如果您使用 jcrop 来裁剪图像,则必须将 blob 代码从图像保存到表单并手动将其发送到服务器,因为 jcrop 仅将图像作为文件处理,而不是作为 base64 字符串处理。

祝你好运!:D

于 2014-03-28T19:32:51.513 回答
1

使用 Html/Javascript,您只能使用文件上传 html 组件选择文件(我认为 Flash/Silverlight 包装它以使事情变得更容易,但它仍然是沙盒)

但是,您可以使用 Java 小程序(或现在所称的任何东西)、本机 ActiveX 控件或 .Net 控件来提供附加功能(这具有安全隐患和所需的 VM/运行时框架等)

Adobe Air 或其他客户端技术可能会起作用,但看起来您想在 JavaScript 中执行此操作。在这种情况下,将文件上传到服务器并从那里进行操作是最好的选择。

* [编辑] 自 2010 年以来,自从回答了这个问题以来,技术不断发展,html 现在能够在浏览器中创建和操作。查看更新的答案或这些示例: http: //davidwalsh.name/resize-image-canvas http://deepliquid.com/content/Jcrop.html *

于 2010-10-22T10:52:15.660 回答