代码之家 › 专栏 › 技术社区 › Rafael de Castro

渲染时图像插件崩溃

ionic3 ionic2 ionic-framework javascript

Rafael de Castro · 技术社区 · 5 年前

我不能显示任何代码,因为问题是没有给我一个错误,消息或任何东西。

我有这样的情况: 我的应用程序必须做2个渲染 domToImage .

然后添加到img.src公司它渲染简单的背景。我将这个bg放在一组Dom元素下,然后一起呈现

直到突然间程序崩溃。我没有做任何更新,对我的代码做任何更改。它在起作用,然后就不起作用了。

我重新制作了这个过程,缩小到只在渲染。仍然崩溃。

我迷路了。。。一个增加的Xwalk,被删除,从地面上创建的另一个同等的项目,仍然崩溃。

有什么方向吗?

使用Dom制作图像2.6.0

离子3-Android平台

Som代码:

主页.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)
    });

包.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 回复 | 直到 5 年前

Nicolas Roehm 5 年前

我建议您可以尝试用另一个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