是否使用JavaScript将本地图像加载到浏览器？
我目前正在为一个web-to-print，海报打印应用程序开发一个解决方案。
我想要包含的功能之一是，在继续订购所述图像的海报之前，可以“编辑”(裁剪/缩放/旋转)给定的图像。
为了避免用户在编辑前将图片上传到远程服务器的要求，我想知道以下几点：
是否可以(使用JavaScript)将存储在客户端计算机上的图像加载到浏览器/浏览器内存中进行编辑，而无需将图像上载到远程服务器？如果是这样的话，是怎么做到的呢？
谢谢,
BK
回答 3
Stack Overflow用户
发布于 2010-10-22 18:52:16
使用Html/Javascript，你只能使用文件上传html组件来选择文件(我认为Flash / Silverlight包装这个组件是为了让事情更简单，但它仍然是沙箱的)
但是，您可以使用Java (或者现在叫它们什么)、原生ActiveX控件或.Net控件来提供额外的功能(这会带来安全隐患和所需的VM/运行时框架等)
Adobe Air或其他客户端技术可能会起作用，但看起来您想在JavaScript中做到这一点。在这种情况下，将文件上传到服务器并从那里进行操作是最好的选择。
*编辑自2010年以来，由于这个问题得到了回答，技术已经发展，html现在具有在浏览器中创建和操作的能力。查看更新的答案或以下示例： *
Stack Overflow用户
发布于 2012-07-15 14:46:01
Stack Overflow用户
发布于 2014-03-29 03:32:52
是的，你可以的！但是为了做到这一点，浏览器必须支持本地存储！它是HTML5应用程序接口，所以大多数现代浏览器都能做到！请记住，localstorage只能保存字符串数据，因此必须将图像更改为blob字符串。YOur图像源将如下所示
这是一个简短的代码片段，可以帮助你！
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 }希望您会发现这段简短的代码片段很有用。请记住，本地存储只保存字符串数据，因此您不能
哦，顺便说一句，如果你使用jcrop来裁剪图像，你必须将blob代码从图像保存到表单中，并手动将其发送到服务器，因为jcrop只将图像作为文件来处理，而不是base64字符串。
祝你好运！:D
https://stackoverflow.com/questions/3996004
复制相似问题