使用 JavaScript 将本地图像加载到浏览器中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3996004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load local image into browser using JavaScript?
提问by kaese
I'm currently developing a solution for a web-to-print, poster printing application.
我目前正在为 Web 打印海报打印应用程序开发解决方案。
One of features I'd like to include is the ability to 'edit' (crop/scale/rotate) a given image, before proceeding to order a poster of said image.
我想包括的功能之一是在继续订购所述图像的海报之前“编辑”（裁剪/缩放/旋转）给定图像的能力。
To avoid the requirement of the user uploading the image to a remote server before editing, I'd like to know the following:
为了避免用户在编辑之前将图像上传到远程服务器的要求，我想知道以下内容：
Is it possible (using JavaScript) to load an image stored on the client machine into the browser / browser memory for editing, without uploading the image to a remote server? And if so, how is this done?
是否可以（使用 JavaScript）将存储在客户端机器上的图像加载到浏览器/浏览器内存中进行编辑，而无需将图像上传到远程服务器？如果是这样，这是如何完成的？
Thanks,
谢谢，
BK
白金
采纳答案by Mark Redman
Using Html/Javascript you can only select files using the file upload html component (I think Flash / Silverlight wrap this to make things easier but its still sandboxed)
使用 Html/Javascript，您只能使用文件上传 html 组件选择文件（我认为 Flash/Silverlight 包装了它以使事情变得更容易，但它仍然是沙盒化的）
You can however use Java Applets (orwhatever they are called these days), Native ActiveX controls or .Net Controls to provide additional functionality (this hase security implications and required VM/Runtimes Frameworks etc)
但是，您可以使用 Java Applets（或者现在叫什么名字）、Native ActiveX 控件或 .Net Controls 来提供附加功能（这具有安全隐患和所需的 VM/运行时框架等）
Adobe Air or other client side technology might work, but looks like you want to do this in JavaScript. In this case, uploading the file to the server and manipulating from there is the best bet.
Adobe Air 或其他客户端技术可能有用，但看起来您想在 JavaScript 中执行此操作。在这种情况下，将文件上传到服务器并从那里进行操作是最好的选择。
*[EDIT] Since 2010, since this question was answered, technology has moved on, html now has the ability to create and manipulate within the browser. see newer answers or these examples: http://davidwalsh.name/resize-image-canvashttp://deepliquid.com/content/Jcrop.html*
* [编辑] 自 2010 年以来，自从回答了这个问题，技术不断发展，html 现在能够在浏览器中创建和操作。查看更新的答案或这些示例：http: //davidwalsh.name/resize-image-canvas http://deepliquid.com/content/Jcrop.html*
回答by santhgates
The image can be edited without the user needed to upload the image to the server.
无需用户将图像上传到服务器即可编辑图像。
Take a look at the link below. It can be done quite easily.
看看下面的链接。它可以很容易地完成。
回答by twboc
Yes you can! But in order to do it the browser must support Local storage! It is HTML5 api so most modern browsers will be able to do it! Remember that localstorage can save only string data so you must change images into a blob string. YOur image source will look something like this
是的你可以！但是为了做到这一点，浏览器必须支持本地存储！它是 HTML5 api，所以大多数现代浏览器都可以做到！请记住，localstorage 只能保存字符串数据，因此您必须将图像更改为 blob 字符串。你的图像源看起来像这样
This is a short snippet that will help you!
这是一个简短的片段，可以帮助您！
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 }
Hope you will find this short snippet useful. Remember Localstorage saves only string data so you cant
希望你会发现这个简短的片段很有用。记住 Localstorage 只保存字符串数据，所以你不能
Oh and by the way if you are using a jcrop for cropping the images you have to save the blob code from image to the form and send it to the server manually because jcrop only handles images as a file not as a base64 string.
哦，顺便说一下，如果您使用 jcrop 裁剪图像，则必须将 blob 代码从图像保存到表单并手动将其发送到服务器，因为 jcrop 仅将图像作为文件处理，而不是作为 base64 字符串处理。
Good luck! :D
祝你好运！:D
回答by Pons
I'm just trying to do it, but with chrome I receive this message:
我只是想这样做，但是使用 chrome 我收到了这条消息：
Not allowed to load local resource: file:///C:/fakepath/1.jpg
when I do this:
当我这样做时：
$img = new Image();
$img.src = $('#f').val();
$img.onLoad = function (){
alert('ok');
}
