Сбой плагина Ionic dom-to-image при рендеринге - PullRequest
Новая
       6

Сбой плагина Ionic dom-to-image при рендеринге

0 голосов
/ 12 декабря 2018

Я не могу показать какой-либо код, потому что проблема не выдает мне ошибку, сообщение или что-то еще.

У меня такая ситуация: моему приложению пришлось сделать 2 рендера с domToImage.

Сначала я получаю изображение из камеры / галереи (base64), а затем добавляю в img.src изображение для простого фона.Я помещаю этот bg в набор элементов Dom, а затем отрисовываю все это вместе. Этот процесс происходил нормально, без проблем, без ошибок, без ошибок.

До тех пор, пока внезапно не началось падение приложения,Я не делал никаких обновлений, никаких изменений в моем коде вообще.Это работало, а потом - нет.

Я переделал процесс и сократил его до просто рендеринга.По-прежнему вылетает.

В действии нет шаблона.Сбой при bg render или заданном render, а иногда и нет.Но это не пропустите 2 подряд.Если не выйдет из строя первая рутина, вторая будет.В любом месте.

Я потерян ... Добавленный Xwalk, удаленный, созданный из земли другой равный проект, все еще падает.Изменил импорт плагинов, даже перезагрузил смартфон для определенной чистой установки ... Не проблема ли мой телефон, потому что множество клиентов по всему миру сообщают об этой ошибке.

В любом направлении?

Использование Dom-to-Image 2.6.0

Ionic 3 - платформа Android

Сом-код:

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"
    ]
  }
}

1 Ответ

0 голосов
/ 14 декабря 2018

Я полагаю, что вы можете попытаться достичь этой цели с помощью другого пакета Js.Давайте попробуем html2canvas :

Установка

npm install --save html2canvas

Импорт 

import html2canvas from 'html2canvas';

Использование 

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

Теперь вы можете отобразить или загрузить изображение, как описано здесь: https://stackoverflow.com/a/17407392

...