您的位置: 首页  >  技术问答  >  如何使用js在Web浏览器中修剪图像并将其保存在服务器上呢？

如何使用js在Web浏览器中修剪图像并将其保存在服务器上呢？

分类: 技术问答 • 2022-03-13 21:23:28

如何使用js在Web浏览器中修剪图像并将其保存在服务器上呢？

问题描述：

I'm looking for some jQuery plugin or smth similar.

For example, I need to crop a photo on website and to save the result on server.

enter image description here

I know that it is better to do it in Adobe Flash, but I really need to do in using JS.

我正在寻找一些jQuery插件或smth类似。 p>

For 例如，我需要在网站上裁剪照片并将结果保存在服务器上。 p>

“在此处输入图像描述” p>

我知道在Adobe Flash中更好，但我确实需要使用JS。 p>

答

Check out jCrop. It's perfect for this stuff.

答

You are looking for JCrop

Here are some demos.

Here is an example implementing in on PHP.

答

Very few browsers support selecting an image with Javascript and manipulating it without first uploading it to a server. Instead, you'll need to:

  1. Allow user to upload image to server
  2. When upload is complete, resize the image (with PHP) to a manageable size for the browser for preview
  3. Show the resized preview image in the browser in something like JCrop
  4. After the user chooses the crop area, have them click "Save"
  5. On Save, pass the coordinates of the cropped area to the server/PHP to have it crop the original image. You'll have to scale the coordinates for the preview to coordinates for the original image.
  6. Save the new image to disk/S3/whatever with PHP

I managed to do this without ever using my server or having the image touch my server by using http://transloadit.com/. I use transloadit's Javascript upload form to upload to their server storage (S3) and use a template that saves the original and resizes for preview. Both the original and preview are stored in transloadit's temporary S3 account, not mine. I then use JCrop to show the user the preview. Once they select the crop area I then tell transloadit to crop the original photo but with my crop coordinates (scaled from the preview image to fit the original) using a template that also makes several thumbnail sizes. Transloadit then saves all the images to my S3 account and tells me the URL where it saved it.

相关推荐