This topic describes how to use OssDemo to watermark, resize, and crop uploaded images.

Watermark images

  • Processing logic
    1. By default, the bucket name is sdk-demo, the object name is test, and the OSS endpoint is oss-cn-hangzhou.aliyuncs.com when you upload an image to Object Storage Service (OSS).
    2. You can add different Image Processing (IMG) parameters to the end of test based on different IMG methods to display different effects.
    3. OssDemo sends a request after obtaining the address of sts_server.
    4. sts_server returns AccessKeyId, AccessKeySecret, SecurityToken, and Expiration.
    5. After obtaining the information, OssDemo calls OSS SDKs to create an OSSClient instance and download the object. The image obtained has been processed by IMG. The endpoint for IMG is img-cn-hangzhou.aliyuncs.com.
  • Code analysis
    1. Click More. The Image Processing page appears.
    2. Obtain the command to add watermarks (100 px × 100 px) to the lower-right corner of the uploaded image.

      Code segment for function implementation:

      In the ImageService class
       The method is provided to add required parameters to the original object name to perform the corresponding functions.
       // Watermark images. Retain default values for other parameters except the size and font. For more information about how to modify other parameters, see the IMG document.
       public String textWatermark(String object, String text, int size) {
           String base64Text = Base64.encodeToString(text.getBytes(), Base64.URL_SAFE | Base64.NO_WRAP);
           String queryString = "@watermark=2&type=" + font + "&text=" + base64Text + "&size=" + String.valueOf(size);
           Log.d("TextWatermark", object);
           Log.d("Text", text);
           Log.d("QuerySyring", queryString);
           return (object + queryString);
       }
    3. Call the download operation of OSS SDKs to process the image.

      Code segment for function implementation:

      getImage(imageService.textWatermark(objectName, "OSS test", 100), 0, "text watermarks in the lower-right corner 100 px × 100 px");
       public void getImage(final String object, final Integer index, final String method) {
           GetObjectRequest get = new GetObjectRequest(bucket, object);
           Log.d("Object", object);
           OSSAsyncTask task = oss.asyncGetObject(get, new UICallback<GetObjectRequest, GetObjectResult>(uiDispatcher) {
               @Override
               public void onSuccess(GetObjectRequest request, GetObjectResult result) {
                   // The object is downloaded.
                   InputStream inputStream = result.getObjectContent();
                   Log.d("GetImage", object);
                   Log.d("Index", String.valueOf(index));
                   try {
                       // Set the maximum dimensions to display an image.
                       adapter.getImgMap().put(index, new ImageDisplayer(1000, 1000).autoResizeFromStream(inputStream));
                       adapter.getTextMap().put(index, method + "\n" + object);
                       // Automatically resize the image based on the size of the corresponding view.
                       addCallback(new Runnable() {
                           @Override
                           public void run() {
                               adapter.notifyDataSetChanged();
                           }
                       }, null);
                   }
                   catch (IOException e) {
                       e.printStackTrace();
                   }
                   super.onSuccess(request,result);
               }

      The processing of download failures is omitted here. For more information, see onFailure in the source code.

Resize, crop, and rotate images

Add the function used to obtain the processing command to ImageService in the same way you add watermarks. The response is in the format of object + processing parameters. Call the GetObject operation to process the image.

// Resize the image.
getImage(imageService.resize(objectName, 100, 100), 1, "resize,h_100,w_100");
// Crop the image.
getImage(imageService.crop(objectName, 100, 100, 9), 2, "crop lower-right corner, px 100 × px 100");
// Rotate the image.
getImage(imageService.rotate(objectName, 90), 3, "rotate,90");