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

我目前正在开发一个web打印、海报打印应用程序的解决方案

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

为了避免用户在编辑之前将图像上载到远程服务器的要求，我想了解以下几点：

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

谢谢

---

BK

使用Html/Javascript，您只能使用文件上传Html组件选择文件（我认为Flash/Silverlight会将其包装起来，使事情变得更简单，但它仍然是沙盒）

但是，您可以使用Java小程序（或现在称之为什么）、本机ActiveX控件或.Net控件来提供额外的功能（这涉及到安全问题和所需的VM/运行时框架等）

AdobeAIR或其他客户端技术可能可以工作，但看起来您希望在JavaScript中实现这一点。在这种情况下，最好将文件上载到服务器并从那里进行操作

*[编辑] 自2010年以来，这个问题得到了回答，技术不断进步，html现在能够在浏览器中创建和操作。请参阅更新的答案或以下示例：

---

*

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

请看下面的链接。这很容易做到

---

是的，你可以！但要做到这一点，浏览器必须支持本地存储！这是HTML5API，所以大多数现代浏览器都能做到！请记住，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字符串处理

---

祝你好运谢谢你，马克。与使用其他客户端技术相比，它提供了所需的功能，但JavaScript是首选。检查一下，它使用的是URL，FileReader api使用的是html5文件api：这是一个仅链接的答案。答案应该在这里解释，而不是在一个外部链接。链接应该只支持解释，而不是答案中提供的唯一内容，因为它可以随时脱机。