title: Image rotation in Angular4
body: <p>I am trying to rotate am image before uploading to my server. The steps I took so far are:</p>
  
  <ol>
  <li>Convert the image to Base64.</li>
  <li>Rotating the base64 string by using canvas.</li>
  <li>Converting the rotated Base64 to the image.</li>
  </ol>
  
  <p>But I am not able to convert it back into image format. The final image file (after rotation) is not able to upload because it is a blob. </p>
  
  <p>Could you please tell me how to convert my rotated Base64 string to image file so that I can create a blob and upload it . </p>
  
  <p>I guess my rotation function is not proper either as I tried to convert it and took the converted base64 string to view on <a href="https://codebeautify.org/base64-to-image-converter" rel="nofollow noreferrer">https://codebeautify.org/base64-to-image-converter</a> and it gave me a blank file (black image file).</p>
  
  <p>The origin of this problem is when user clicks a image on iOS or Android and uploads it the image appears sideways. To fix this I am trying to  rotate the image according to its EXIF orientation.</p>
  
  <pre><code>function detectFiles(event) {
      this.getOrientation(event.target.files[0], function (orientation) {
          this.imageOrientation = orientation;
      }.bind(this));
      console.log('the original image data', event.target.files);
      this.selectedFiles = event.target.files;
  
      // SAS : Converting the selected image to Base64 for rotation.
      const reader = new FileReader();
      reader.onloadend = (e) =&gt; {
          this.base64Data = reader.result;
          const rotatedData = this.rotateBase64Image(this.base64Data);
  
          // SAS: Calling the data uri to blob
          const selFile = this.dataURItoBlob(rotatedData);
          this.uploadFiles(selFile);
      }
  
      reader.readAsDataURL(event.target.files[0]);
  
  }
  
  // SAS: Rotate the image.
  function rotateBase64Image(base64ImageSrc) {
      const canvas = document.createElement('canvas');
      const img = new Image();
      img.onload = function () {
          canvas.width = img.width;
          canvas.height = img.height;
          console.log('image height and width', canvas.width , canvas.height);
      }
      img.src = base64ImageSrc;
      const context = canvas.getContext('2d');
      context.translate((img.width), (img.height));
      // context.rotate(180 * (Math.PI / 180));
      context.rotate(90);
      context.drawImage(img, 0, 0);
      console.log(canvas);
      console.log('the rotated image', canvas.toDataURL());
      return canvas.toDataURL();
  }
  
  // SAS: Data URI to Blob
  function dataURItoBlob(dataURI) {
      // convert base64 to raw binary data held in a string
      // doesn't handle URLEncoded DataURIs
      const byteString = atob(dataURI.split(',')[1]);
  
      // separate out the mime component
      const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
  
      // write the bytes of the string to an ArrayBuffer
      const ab = new ArrayBuffer(byteString.length);
  
      // create a view into the buffer
      const ia = new Uint8Array(ab);
  
      // set the bytes of the buffer to the correct values
      for (let i = 0; i &lt; byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i);
      }
  
      // write the ArrayBuffer to a blob, and you're done
      const blob = new Blob([ab], {type: mimeString});
      console.log('the value of the blob', blob);
      return blob;
  }
  </code></pre>
  
  <p>And After this I am trying to upload the data using the below function which accepts the image file.</p>
  
  <pre><code>uploadFiles(selFile) {
      // SAS: Setting the 'image uploaded flag' to be retrieved in quick post to prevent duplicate placeholders.
  
      // const file = this.selectedFiles.item(0);
      const file = selFile;
      this.currentUpload = new Upload(file);
  
  // This is the API call to upload the file.
      this.storageApiService.createBlob(file).subscribe((response) =&gt; {
  
        console.log(response);
      }, (error) =&gt; {
        console.log(error);
      });
    }
  }
  </code></pre>