在線編輯圖片（含完整源碼)

時間 2019-12-02

標籤在線編輯圖片完整源碼简体版

原文原文鏈接

一個免費的圖片編輯SDK，可用於web，ios，android平臺。本文主要介紹web端使用方法。javascript

1 效果圖

點擊「Edit Photo」按鈕，查看效果圖html

2 實現

複製下面代碼，保存爲html文件java

 
  <html xmlns="http://www.w3.org/1999/xhtml"> 
   
  <head runat="server"> 
   
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
   
      <title>圖片編輯</title> 
   
     <script src="https://code.jquery.com/jquery-1.7.2.js"></script> 
   
      <script src="https://dme0ih8comzn4.cloudfront.net/js/feather.js"></script> 
   
      <script type='text/javascript'>         
   
          //在線編輯圖片功能，第三方插件，徹底免費 
   
          var featherEditor = new Aviary.Feather({ 
   
              apiKey: '121285904@qq.com',//apikey能夠免費申請，https://creativesdk.adobe.com/docs/web/#/index.html 
   
              apiVersion: 3, 
   
              theme: 'dark', // Check out our new 'light' and 'dark' themes! 
   
              tools: 'all',//這裏設置爲all，能夠顯示全部的工具 
   
              initTool: 'text',//默認展開的工具 
   
              language: 'zh_HANS',//簡體中文 
   
              appendTo: '',           
   
              onSave: function (imageID, newURL) { 
   
                  //alert(newURL); 
   
                  $.ajax({ 
   
                      url: "ashx/CarInfo.ashx?type=DownloadCarPhoto&imgUrl=" + newURL + "&rand=" + Math.random(), 
   
                      success: function (url) { 
   
                          alert('保存成功'); 
   
                          var img = document.getElementById(imageID); 
   
                          img.src = url; 
   
                      }, 
   
                      error: function () { 
   
                          alert('error') 
   
                      } 
   
                  }); 
   
              }, 
   
              onError: function (errorObj) { 
   
                  alert(errorObj.message); 
   
              } 
   
          }); 
   
          function launchEditor(id, src) { 
   
              featherEditor.launch({ 
   
                  image: id, 
   
                  url: src 
   
              }); 
   
              return false; 
   
          } 
   
  </script> 
   
  </head> 
   
  <body> 
   
      <form id="form1" runat="server"> 
   
     <div id='injection_site'></div> 
   
  <img id='image1' src='https://img.alicdn.com/imgextra/i2/62935302/TB2hBzSeXXXXXbMXXXXXXXXXXXX_!!62935302.jpg'/> 
   
  <!-- Add an edit button, passing the HTML id of the image and the public URL of the image --> 
   
  <p><input type='image' src='' value='Edit photo' onclick="return launchEditor('image1', 'https://img.alicdn.com/imgextra/i2/62935302/TB2hBzSeXXXXXbMXXXXXXXXXXXX_!!62935302.jpg');" /></p> 
   
      </form> 
   
  </body> 
   
  </html>

做者：瘋吻IT 出處：http://fengwenit.cnblogs.comjquery

3 參數介紹

apiKey

必須，apikey能夠免費申請，https://creativesdk.adobe.com/docs/web/#/index.htmlandroid

全部的工具

tools: 'text,resize',//這裏設置爲all，能夠顯示全部的工具；若是隻想顯示部份工具，能夠用逗號分隔ios

全部工具以下：web

enhance: Autocorrect your photo with one of five basic enhancements.ajax
effects: Choose from a variety of effects and filters for your photo.api
frames: Choose from a variety of frames to apply around your photo.app
overlays: Choose from a variety of overlays to apply over your photo.
stickers: Choose from a variety of stickers you can resize and place on your photo.
orientation: Rotate and flip your photo in one tool.
crop: Crop a portion of your photo. Add presets via API. Fixed-pixel cropPresets perform a resize when applied.
resize: Resize the image using width and height number fields.
lighting: Adjust the lighting in your photo with this collection of adjustment toools.
color: Adjust the color in your photo with this collection of adjustment toools.
sharpness: Blur or sharpen the overall image in one tool.
focus: Adds a selective linear or radial focus to your photo.
vignette: Adds an adjustable vignette to your photo.
blemish: Remove skin blemishes with a brush.
whiten: Whiten teeth with a brush.
redeye: Remove redeye from your photo with a brush.
draw: Add doodle overlays with a brush.
colorsplash: Use a smart brush to colorize parts of your photo which becomes grayscale otherwise.
text: Add custom, resizable text.
meme: Turn your photo into a meme with this tool that adds text to the top and bottom of your photo.