Question

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

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

为了避免用户在编辑之前将图像上传到远程服务器的要求，我想知道以下内容：

是否可以（使用JavaScript）将存储在客户端计算机上的图像加载到浏览器/浏览器内存中进行编辑，而无需将图像上传到远程服务器？如果是这样，这是怎么做的？

谢谢，

BK

Answer 1

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

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

Reading local files using Javascript

Answer 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

Answer 3

使用Html / Javascript你只能使用文件上传html组件选择文件（我认为Flash / Silverlight包装这样可以使事情变得更容易，但仍然是沙箱）

然而，您可以使用Java Applet（或者现在称为它们），Native ActiveX控件或.Net控件来提供其他功能（这会带来安全隐患和所需的VM /运行时框架等）

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

* [编辑] 自2010年以来，由于这个问题得到了回答，技术已经发展，html现在能够在浏览器中创建和操作。看到更新的答案或这些例子： http://davidwalsh.name/resize-image-canvas http://deepliquid.com/content/Jcrop.html *

Answer 4

我只是想这样做，但是使用chrome我收到了这条消息：

Not allowed to load local resource: file:///C:/fakepath/1.jpg

当我这样做时：

$img = new Image();
$img.src = $('#f').val();
$img.onLoad = function (){
    alert('ok');
}

使用JavaScript将本地图像加载到浏览器中？

4 个答案: