admin管理员组

文章数量:1406926

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": "/",
  "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/mon": "5.2.11",
    "@angular/piler": "5.2.11",
    "@angular/piler-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"
    ]
  }
}

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./",
  "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/mon": "5.2.11",
    "@angular/piler": "5.2.11",
    "@angular/piler-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"
    ]
  }
}

• javascript
• ionic-framework
• ionic2
• ionic3

Share Improve this question Follow edited Dec 15, 2018 at 23:14 Rafael de Castro asked Dec 12, 2018 at 14:38 Rafael de CastroRafael de Castro 1,10855 gold badges1717 silver badges3939 bronze badges 7

• try this var domtoimage = require("dom-to-image-chrome-fix") instead of var domtoimage = require('dom-to-image') – I_Al-thamary Commented Dec 14, 2018 at 18:36
• ourcodeworld./articles/read/38/… – I_Al-thamary Commented Dec 14, 2018 at 18:47
• 3 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 Commented Dec 14, 2018 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 Commented Dec 15, 2018 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 Commented Dec 15, 2018 at 23:06

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 6 +50

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./a/17407392

本文标签： javascriptIonic domtoimage plugin crash when renderingStack Overflow