fixing the screenshot issue

assets/css/src/newsletter_templates.styl

@@ -3,5 +3,7 @@
 .mailpoet_template_iframe
   position: absolute
   z-index: -9999
-  width: $newsletter-width
-  max-width: $newsletter-width
+  top: 0
+  left: 0
+  width: $newsletter-width + 20
+  max-width: $newsletter-width + 20

assets/js/src/common/thumbnail.jsx

@@ -0,0 +1,78 @@
+import _ from 'underscore';
+import MailPoet from 'mailpoet';
+import html2canvas from 'html2canvas';
+
+/**
+ * Generates a thumbnail from a DOM element.
+ *
+ * @param  {DOMElement}      element
+ * @return {Promise<String>} DataURL of the generated image.
+ */
+export const fromDom = element =>
+  html2canvas(element, {
+    allowTaint: true,
+    useCORS: true,
+    foreignObjectRendering: true,
+    logging: false,
+  }).then(canvas => canvas.toDataURL('image/jpeg'));
+
+/**
+ * Generates a thumbnail from an URL.
+ *
+ * @param  {String}        url
+ * @return {Promise<String>} DataURL of the generated image.
+ */
+export const fromUrl = url =>
+  new Promise((resolve, reject) => {
+    const iframe = document.createElement('iframe');
+    const protocol = location.href.startsWith('https://') ? 'https' : 'http';
+    iframe.src = protocol + url.replace(/^https?/, '');
+    iframe.style.opacity = 0;
+    iframe.onload = () => {
+      fromDom(iframe.contentDocument.documentElement)
+      .then((image) => {
+        document.body.removeChild(iframe);
+        resolve(image);
+      })
+      .catch(() => {
+        document.body.removeChild(iframe);
+        reject(MailPoet.I18n.t('errorWhileTakingScreenshot'));
+      });
+    };
+    const onError = () => {
+      document.body.removeChild(iframe);
+      reject(MailPoet.I18n.t('errorWhileTakingScreenshot'));
+    };
+    iframe.onerror = onError;
+    iframe.onError = onError;
+    iframe.className = 'mailpoet_template_iframe';
+    try {
+      document.body.appendChild(iframe);
+    } catch (err) {
+      onError();
+    }
+  });
+
+/**
+ * Generates a thumbnail from a newsletter's data.
+ *
+ * @param  {Object}        data
+ * @return {Promise<String>} DataURL of the generated image.
+ */
+export const fromNewsletter = data =>
+  new Promise((resolve, reject) => {
+    const json = data;
+    if (!_.isUndefined(json.body)) {
+      json.body = JSON.stringify(json.body);
+    }
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'newsletters',
+      action: 'showPreview',
+      data: json,
+    }).done(response => fromUrl(response.meta.preview_url)
+        .then(resolve)
+        .catch(reject)
+    ).fail(response => reject(response.errors));
+  });
+

assets/js/src/newsletter_editor/components/save.js

@@ -9,7 +9,7 @@ define([
   'jquery',
   'blob',
   'file-saver',
-  'html2canvas',
+  'common/thumbnail.jsx',
   'underscore',
   'jquery'
 ], function (
@@ -22,7 +22,7 @@ define([
   jQuery,
   Blob,
   FileSaver,
-  html2canvas,
+  Thumbnail,
   _,
   $
 ) {
@@ -71,36 +71,11 @@ define([
     });
   };
 
-  Module.getThumbnail = function (element, options) {
-    var promise = html2canvas(element, options || {});
-
-    return promise.then(function (oldCanvas) {
-      // Temporary workaround for html2canvas-alpha2.
-      // Removes 1px left transparent border from resulting canvas.
-
-      var newCanvas = document.createElement('canvas');
-      var newContext = newCanvas.getContext('2d');
-      var leftBorderWidth = 1;
-
-      newCanvas.width = oldCanvas.width;
-      newCanvas.height = oldCanvas.height;
-
-      newContext.drawImage(
-        oldCanvas,
-        leftBorderWidth, 0, oldCanvas.width - leftBorderWidth, oldCanvas.height,
-        0, 0, oldCanvas.width, oldCanvas.height
-      );
-
-      return newCanvas;
-    });
-  };
-
   Module.saveTemplate = function (options) {
-    var promise = jQuery.Deferred();
-
-    promise.then(function (thumbnail) {
+    return Thumbnail.fromNewsletter(App.toJSON())
+    .then(function (thumbnail) {
       var data = _.extend(options || {}, {
-        thumbnail: thumbnail.toDataURL('image/jpeg'),
+        thumbnail: thumbnail,
         body: JSON.stringify(App.getBody()),
         categories: JSON.stringify([
           'saved',
@@ -115,22 +90,13 @@ define([
         data: data
       });
     });
-
-    Module.getThumbnail(
-      jQuery('#mailpoet_editor_content > .mailpoet_block').get(0)
-    ).then(function (thumbnail) {
-      promise.resolve(thumbnail);
-    });
-
-    return promise;
   };
 
   Module.exportTemplate = function (options) {
-    return Module.getThumbnail(
-      jQuery('#mailpoet_editor_content > .mailpoet_block').get(0)
-    ).then(function (thumbnail) {
+    return Thumbnail.fromNewsletter(App.toJSON())
+    .then(function (thumbnail) {
       var data = _.extend(options || {}, {
-        thumbnail: thumbnail.toDataURL('image/jpeg'),
+        thumbnail: thumbnail,
         body: App.getBody(),
         categories: JSON.stringify(['saved', App.getNewsletter().get('type')])
       });
@@ -220,7 +186,7 @@ define([
         Module.saveTemplate({
           name: templateName,
           description: templateDescription
-        }).done(function () {
+        }).then(function () {
           MailPoet.Notice.success(
             MailPoet.I18n.t('templateSaved'),
             {
@@ -231,7 +197,7 @@ define([
           MailPoet.trackEvent('Editor > Template saved', {
             'MailPoet Free version': window.mailpoet_version
           });
-        }).fail(function () {
+        }).catch(function () {
           MailPoet.Notice.error(
             MailPoet.I18n.t('templateSaveFailed'),
             {

assets/js/src/newsletters/send.jsx

@@ -11,7 +11,7 @@ define(
     'newsletters/breadcrumb.jsx',
     'help-tooltip.jsx',
     'jquery',
-    'html2canvas',
+    'common/thumbnail.jsx',
   ],
   (
     React,
@@ -25,7 +25,7 @@ define(
     Breadcrumb,
     HelpTooltip,
     jQuery,
-    html2canvas
+    Thumbnail
   ) => {
     const NewsletterSend = React.createClass({
       contextTypes: {
@@ -91,12 +91,8 @@ define(
         });
       },
       saveTemplate: function (response, done) {
-        const iframe = document.createElement('iframe');
-        const protocol = location.href.startsWith('https://') ? 'https' : 'http';
-        iframe.src = protocol + response.meta.preview_url.replace(/^https?/, '');
-        iframe.onload = () => {
-          html2canvas(iframe.contentDocument.documentElement).then((thumbnail) => {
-            document.body.removeChild(iframe);
+        Thumbnail.fromUrl(response.meta.preview_url)
+        .then(function (thumbnail) {
           MailPoet.Ajax.post({
             api_version: window.mailpoet_api_version,
             endpoint: 'newsletterTemplates',
@@ -105,27 +101,13 @@ define(
               newsletter_id: response.data.id,
               name: response.data.subject,
               description: response.data.preheader,
-                thumbnail: thumbnail.toDataURL('image/jpeg'),
+              thumbnail: thumbnail,
               body: JSON.stringify(response.data.body),
               categories: '["recent"]',
             },
           }).then(done).fail(this.showError);
-          });
-        };
-        const onError = () => {
-          document.body.removeChild(iframe);
-          MailPoet.Notice.error([MailPoet.I18n.t('errorWhileTakingScreenshot')], { scroll: true });
-          done();
-        };
-        iframe.onerror = onError;
-        iframe.onError = onError;
-        // just to hide the iframe
-        iframe.className ='mailpoet_template_iframe';
-        try {
-          document.body.appendChild(iframe);
-        } catch (err) {
-          onError();
-        }
+        })
+        .catch(err => this.showError({ errors: [err] }));
       },
       handleSend: function (e) {
         e.preventDefault();

package.json

@@ -18,7 +18,7 @@
     "file-saver": "^1.3.3",
     "handlebars": "4.0.11",
     "history": "1.13.1",
-    "html2canvas": "0.5.0-alpha2",
+    "html2canvas": "^1.0.0-alpha.10",
     "interact.js": "~1.2.8",
     "jquery": "2.1.4",
     "moment": "^2.19.3",