blocks|key|3015372|text|使用Html/Javascript，你只能使用文件上传html组件来选择文件(我认为Flash+/+Silverlight包装这个组件是为了让事情更简单，但它仍然是沙箱的)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3015373|但是，您可以使用Java+(或者现在叫它们什么)、原生ActiveX控件或.Net控件来提供额外的功能(这会带来安全隐患和所需的VM/运行时框架等)|3015374|Adobe+Air或其他客户端技术可能会起作用，但看起来您想在JavaScript中做到这一点。在这种情况下，将文件上传到服务器并从那里进行操作是最好的选择。|3015375|*编辑自2010年以来，由于这个问题得到了回答，技术已经发展，html现在具有在浏览器中创建和操作的能力。查看更新的答案或以下示例：++*|3015376|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

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)

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)

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.

*[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:
<a href="http://davidwalsh.name/resize-image-canvas" rel="nofollow">http://davidwalsh.name/resize-image-canvas</a>
<a href="http://deepliquid.com/content/Jcrop.html" rel="nofollow">http://deepliquid.com/content/Jcrop.html</a>
*

blocks|key|291088|text|无需用户将图像上传到服务器，即可编辑图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291089|看看下面的链接。这是很容易做到的。|291090|Reading+local+files+using+Javascript|offset|length|291091|entityMap|0|LINK|mutability|MUTABLE|url|http://www.html5rocks.com/en/tutorials/file/dndfiles/^0|0|0|0|10|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

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.

<a href="http://www.html5rocks.com/en/tutorials/file/dndfiles/">Reading local files using Javascript</a>

blocks|key|3015401|text|是的，你可以的！但是为了做到这一点，浏览器必须支持本地存储！它是HTML5应用程序接口，所以大多数现代浏览器都能做到！请记住，localstorage只能保存字符串数据，因此必须将图像更改为blob字符串。YOur图像源将如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3015402|​|3015403|这是一个简短的代码片段，可以帮助你！|3015404|++++++++++++++++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("%2Bwall%2B")";


+++++++++++++++++}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+}|code-block|syntax|javascript|3015405|希望您会发现这段简短的代码片段很有用。请记住，本地存储只保存字符串数据，因此您不能|3015406|哦，顺便说一句，如果你使用jcrop来裁剪图像，你必须将blob代码从图像保存到表单中，并手动将其发送到服务器，因为jcrop只将图像作为文件来处理，而不是base64字符串。|3015407|祝你好运！:D|3015408|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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



This is a short snippet that will help you!

<pre><code> 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 }
</code></pre>

Hope you will find this short snippet useful. Remember Localstorage saves only string data so you cant 

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.

Good luck! :D

I'm currently developing a solution for a web-to-print, poster printing application.

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?

Thanks,

BK

Load local image into browser using JavaScript?

服务器

HTML5

Java

我目前正在为一个web-to-print，海报打印应用程序开发一个解决方案。我想要包含的功能之一是，在继续订购所述图像的海报之前，可以“编辑”(裁剪/缩放/旋转)给定的图像。为了避免用户在编辑前将图片上传到远程服务器的要求，我想知道以下几点：是否可以(使用JavaScript)将存储在客户端计算机上的图像加载到浏览器/...

问是否使用JavaScript将本地图像加载到浏览器？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否使用JavaScript将本地图像加载到浏览器？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否使用JavaScript将本地图像加载到浏览器？
EN