Ionic dom-to-image plugin crash when rendering

Question

I can't show any code, because the problem isn't give me an error, a message or anything.

I have this situation: My app had to do 2 renders with domToImage.

First, I get an image from Camera/Gallery (base64) Then adding to img.src it renders for a simple background. I put this bg under a set of Dom elements and then render it all together This process was happening fine, no problems, no errors, no bugs.

Until out of a sudden it start crashing the app. I didn't make any update, any change on my code at all. It was working, and then it wasn't.

I remade the process and downsized to just on render. Still crashes.

There's no pattern on action. It crashes under bg render or the set render, or sometimes don't. But it don't miss 2 in a row. If doesn't fail the first routine, the 2nd will. Anywhere.

I'm lost... A added Xwalk, removed, created from the ground another equal project, still crashes. Changed the plugin importation, even reset the smartphone for a certain clean installation... Is not my phone's problem cause a bunch of clients around the world are reporting this bug.

Any direction?

Using Dom-to-Image 2.6.0

Ionic 3 - Android Platform

Som code:

home.ts

import domtoimage from "dom-to-image";

var node= document.getElementById("render");

    domtoimage.toPng(node, {
      height: node.offsetHeight * 2,
      width: node.offsetWidth * 2)
    })
    .then(dataUrl => {
      EventEmitterService.get("fullRendered").emit(dataUrl);
    })
    .catch(error => {
      alert(error)
    });

=================================

package.json

{
  "name": "Ionic App",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/admob-free": "^4.18.0",
    "@ionic-native/android-full-screen": "^4.18.0",
    "@ionic-native/app-version": "^4.18.0",
    "@ionic-native/camera": "^4.18.0",
    "@ionic-native/core": "~4.17.0",
    "@ionic-native/file": "^4.18.0",
    "@ionic-native/photo-library": "^4.18.0",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",
    "@ionic/storage": "^2.2.0",
    "angular2-uuid": "^1.1.1",
    "cordova-admob-sdk": "^0.21.0",
    "cordova-android": "^7.0.0",
    "cordova-plugin-admob-free": "0.24.0",
    "cordova-plugin-app-version": "0.1.9",
    "cordova-plugin-camera": "4.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "6.0.1",
    "cordova-plugin-fullscreen": "1.2.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.1",
    "cordova-plugin-photo-library": "2.2.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-promise-polyfill": "0.0.2",
    "cordova-sqlite-storage": "2.5.2",
    "dom-to-image": "^2.6.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "jquery": "^3.3.1",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "@types/jquery": "^3.3.24",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-fullscreen": {},
      "cordova-plugin-file": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-photo-library": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "Save images on your phone"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-admob-free": {
        "ADMOB_APP_ID": ""
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

try this `var domtoimage = require("dom-to-image-chrome-fix")` instead of var `domtoimage = require('dom-to-image')` — I_Al-thamary, Dec 14 '18 at 18:36
https://ourcodeworld.com/articles/read/38/how-to-capture-an-image-from-a-dom-element-with-javascript — I_Al-thamary, Dec 14 '18 at 18:47
You need to post enough information for someone to reproduce the problem. What is crashing: a browser, an Electron app, Node, V8, something else? Post the code that is crashing. What other packages are you using? Post your `package.json` and `package-lock.json` files, or at least the dependency parts, if they are not too big, or post links to them (use `GitHub gists` to publish them) if they are too big. — Old Pro, Dec 14 '18 at 20:20
@OldPro The question title already explain where it crash, an Ionic App. Part of my problem is that I cannot reproduce the problem... There isn't a pattern on how or when it will crash the app. My implementation is the exactly same used on official docs. I'll edit with my package.json, although it won't be of any help. I tried used the plugin without any other cordova natives, same results. — Rafael de Castro, Dec 15 '18 at 23:04
@i_th Thanks the link you've sent actually is a very old but still functional implementation. Anyway this is no different from what I'm using on my code, and the importation it is as I show on the redition of the question. — Rafael de Castro, Dec 15 '18 at 23:06
@RafaeldeCastro try this :https://plnkr.co/edit/f57wfo?p=preview — I_Al-thamary, Dec 16 '18 at 00:02
@i_th this implementation is for AngularJS, Ionic3 uses Angular2-7 But thanks for the try :D — Rafael de Castro, Dec 16 '18 at 11:33

score 6 · Accepted Answer · answered Dec 14 '18 at 18:23

6

I suggest that you can try to achieve that goal with another Js package. Let's try html2canvas :

Installation

npm install --save html2canvas

Import

import html2canvas from 'html2canvas';

Usage

var element = document.getElementById('div-to-render');
html2canvas(element, { allowTaint : true }).then((canvas) =>
{
  canvas.getContext('2d');
  var image = canvas.toDataURL('image/jpeg', 1.0);
});

Now you can display or download the image as explained here : https://stackoverflow.com/a/17407392

answered Dec 14 '18 at 18:23

Nicolas Roehm

688
1
8
15

Nicolas thanks for your suggestion, but html2canvas isn't good for me. I tried at first but it don't render all my html elements properly. It serve for a few things, but mine is too specific. – Rafael de Castro Dec 15 '18 at 22:55

Ionic dom-to-image plugin crash when rendering

Som code:

1 Answers1