Use `Canvas::toDataURL` to preserve `ImageView` logic

This way, all the other code paths remain untouched in case we want to remove
the auto-orient code once Chrome supports the `image-orientation` CSS property.

See:
- #998
- https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation

js/views/attachment_view.js

@@ -17,9 +17,8 @@
       tagName: 'img',
       initialize: function(objectUrl, contentType, blob) {
         loadImage(blob, autoOrientedCanvas => {
-          this.el.replaceWith(autoOrientedCanvas);
+          this.source = autoOrientedCanvas.toDataURL();
           this.render();
-          this.update();
         }, {
           orientation: true,
         });
@@ -31,7 +30,7 @@
         this.trigger('update');
       },
       render: function() {
-        if (!this.source) {
+        if (this.source == null) {
           return this;
         }
 

stylesheets/_conversation.scss

@@ -568,10 +568,7 @@ span.status {
       background-color: #ccc;
     }
 
-    img,
+    img, audio, video {
-    canvas, /* used for auto-oriented images from `loadImage` */
-    audio,
-    video {
       max-width: 100%;
       max-height: 300px;
     }