我目前正在为网络打印、海报打印应用程序开发解决方案。
我想要包含的功能之一是能够“编辑”（裁剪/缩放/旋转）给定图像，然后再订购该图像的海报。
为了避免用户在编辑之前将图像上传到远程服务器的要求，我想知道以下几点：
是否可以（使用 JavaScript）将存储在客户端计算机上的图像加载到浏览器/浏览器内存中进行编辑，而无需将图像上传到远程服务器？如果是这样，这是如何完成的？
谢谢，
BK
【问题讨论】：
标签： javascript image-processing uploading
使用 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 *
【讨论】：
是的，你可以！但为了做到这一点，浏览器必须支持本地存储！它是 HTML5 api，因此大多数现代浏览器都可以做到！请记住，localstorage 只能保存字符串数据，因此您必须将图像更改为 blob 字符串。你的图像源看起来像这样
这是一个简短的 sn-p，可以帮助你！
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 }
希望你会发现这个简短的 sn-p 有用。记住 Localstorage 只保存字符串数据，所以你不能
哦，顺便说一句，如果您使用 jcrop 来裁剪图像，则必须将 blob 代码从图像保存到表单并手动将其发送到服务器，因为 jcrop 仅将图像作为文件而不是 base64 字符串处理.
祝你好运！ :D
【讨论】：
【讨论】：