Use bitmapAdapter for costume upload

src/containers/costume-library.jsx

@@ -28,8 +28,8 @@ class CostumeLibrary extends React.PureComponent {
     handleItemSelected (item) {
         const vmCostume = {
             name: item.name,
-            rotationCenterX: item.info[0],
-            rotationCenterY: item.info[1],
+            rotationCenterX: item.info[0] / 2,
+            rotationCenterY: item.info[1] / 2,
             bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
             skinId: null
         };

src/containers/costume-tab.jsx

@@ -164,8 +164,8 @@ class CostumeTab extends React.Component {
         const vmCostume = {
             name: item.name,
             md5: item.md5,
-            rotationCenterX: item.info[0],
-            rotationCenterY: item.info[1],
+            rotationCenterX: item.info[0] / 2,
+            rotationCenterY: item.info[1] / 2,
             bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
             skinId: null
         };

src/containers/stage.jsx

@@ -9,6 +9,7 @@ import {STAGE_DISPLAY_SIZES} from '../lib/layout-constants';
 import {getEventXY} from '../lib/touch-utils';
 import VideoProvider from '../lib/video/video-provider';
 import {SVGRenderer as V2SVGAdapter} from 'scratch-svg-renderer';
+import {BitmapAdapter as V2BitmapAdapter} from 'scratch-svg-renderer';
 
 import StageComponent from '../components/stage/stage.jsx';
 
@@ -60,6 +61,7 @@ class Stage extends React.Component {
             this.props.vm.attachRenderer(this.renderer);
         }
         this.props.vm.attachV2SVGAdapter(new V2SVGAdapter());
+        this.props.vm.attachV2BitmapAdapter(new V2BitmapAdapter());
         this.props.vm.setVideoProvider(new VideoProvider());
     }
     componentDidMount () {

src/lib/file-uploader.js

-import {importBitmap} from 'scratch-svg-renderer';
+import {BitmapAdapter} from 'scratch-svg-renderer';
 import log from './log.js';
 
 /**
@@ -79,7 +79,7 @@ const cacheAsset = function (storage, fileName, assetType, dataFormat, data) {
 
 /**
  * Handles loading a costume or a backdrop using the provided, context-relevant information.
- * @param {ArrayBuffer | string} fileData The costume data to load (this can be an image url
+ * @param {ArrayBuffer | string} fileData The costume data to load (this can be a base64 string
  * iff the image is a bitmap)
  * @param {string} fileType The MIME type of this file
  * @param {string} costumeName The user-readable name to use for the costume.
@@ -112,13 +112,15 @@ const costumeUpload = function (fileData, fileType, costumeName, storage, handle
         return;
     }
 
-    const addCostumeFromBuffer = function (error, costumeBuffer) {
-        if (error) {
-            log.warn(`An error occurred while trying to extract image data: ${error}`);
-            return;
-        }
-
-        const vmCostume = cacheAsset(storage, costumeName, assetType, costumeFormat, costumeBuffer);
+    const bitmapAdapter = new BitmapAdapter();
+    const addCostumeFromBuffer = function (dataURI) {
+        const vmCostume = cacheAsset(
+            storage,
+            costumeName,
+            assetType,
+            costumeFormat,
+            bitmapAdapter.convertDataURIToBinary(dataURI)
+        );
         handleCostume(vmCostume);
     };
 
@@ -130,7 +132,12 @@ const costumeUpload = function (fileData, fileType, costumeName, storage, handle
         addCostumeFromBuffer(null, new Uint8Array(fileData));
     } else {
         // otherwise it's a bitmap
-        importBitmap(fileData, addCostumeFromBuffer);
+        let dataURI = fileData;
+        if (fileData instanceof ArrayBuffer) {
+            dataURI = bitmapAdapter.convertBinaryToDataURI(fileData, fileType);
+        }
+        // @todo show an error message to user on failure?
+        bitmapAdapter.importBitmap(dataURI).then(value => addCostumeFromBuffer(value));
     }
 };