标签: ionic3

如何在不降低质量和目标宽度和高度的情况下调整 Ionic 3 中的图像大小?

我想减小相机 API 拍摄的图像的大小,但质量降低并不好。最好的办法是降低分辨率,但我不想为所有图像使用目标宽度和高度。

例如,我希望图像宽度为 1280 并且图像高度按比例自动更改,但在 API 中我应该使用精确的宽度和高度。

如何通过图像比例更改高度动态???

现在,我使用以下代码:

 this.camera.getPicture({
  quality: 60,
  destinationType: this.camera.DestinationType.FILE_URI,
  sourceType: sourceType,
  mediaType: this.camera.MediaType.PICTURE,
  targetWidth: 1280,
  targetHeight: 1280,
  encodingType: this.camera.EncodingType.JPEG,
  saveToPhotoAlbum: (source === PictureSource.CAMERA),
  allowEdit: true
})
Run Code Online (Sandbox Code Playgroud)

camera resize ionic-framework ionic3

2
推荐指数
1
解决办法
1万
查看次数

离子 CLI 未卸载

这涉及到我刚才的问题在这里这是从来没有解决。我正在尝试通过重新安装 Ionic 来解决问题。

我首先尝试使用 卸载 Ionic sudo npm uninstall -g ionic,它完成时没有错误,但ionic -v仍然输出2.1.1,所以显然它并没有真正被卸载。之后我尝试了sudo npm install -g ionic@latest,我的问题仍然存在。

更奇怪的是当我试图从头开始创建一个新项目来测试它时发生的事情。我ionic start test --v2在我的 Ubuntu 机器上做了,并且ionic serve仍然做我在上一个问题中所说的同样的事情。

ionic2 ionic3

2
推荐指数
2
解决办法
1万
查看次数

如何在离子 3 的选项卡内创建选项卡

我正在尝试在 ionic 3 中的一个选项卡内创建三个选项卡,但是我无法让它工作。

这是我尝试做的一个例子,但它似乎是用早期版本的 ionic 实现的。我正在使用离子 3.10.3

来自 CLI 的 ionic -v 打印 3.10.3

以下是我的项目中的一些信息。

我有一个包含三个选项卡(主页、消息、设置)的主页,我想在消息选项卡内容中创建其他三个选项卡(全部、已读、未读)。

这是我的项目的内容

主要的

/src/pages/main/main.ts 
Run Code Online (Sandbox Code Playgroud)

/src/pages/main/main.html
Run Code Online (Sandbox Code Playgroud)

import { Component } from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';

import { HomePage } from '../home/home';
import { SettingPage } from '../setting/setting';
import { MessagePage } from '../message/message';


@Component({
	selector: 'page-main',
	templateUrl: 'main.html'
	
})

export class MainPage {
	tabHomeRoot : HomePage;
	tabSettingRoot: SettingPage;
	tabMessageRoot: MessagePage;
	
	constructor(){
				
	}
}
Run Code Online (Sandbox Code Playgroud)

其他标签的内容是基本的,所以我只放消息标签的内容

信息

/src/pages/message/message.ts
Run Code Online (Sandbox Code Playgroud)

/src/pages/main/main.html
Run Code Online (Sandbox Code Playgroud)

/src/pages/message/message.html
Run Code Online (Sandbox Code Playgroud)

	<ion-tabs>
		<ion-tab [root]="tabHomeRoot" …
Run Code Online (Sandbox Code Playgroud)

typescript ionic-framework ionic3 angular

2
推荐指数
1
解决办法
1万
查看次数

未捕获的错误:无法解析 PushObject 的所有参数:(?)

当我在 android 上运行时发生了这个错误。

我正在使用 @ionic-native/push 从我的 nodejs 服务器接收推送通知。这是我的配置:Component.ts:

initPushNotification() {
    const options: PushOptions = {
      android: {},
      ios: {
          alert: 'true',
          badge: true,
          sound: 'false'
      },
      windows: {},
      browser: {
          pushServiceURL: 'http://push.api.phonegap.com/v1/push'
      }
   };
    const pushObject: PushObject = this.push.init(options);

    pushObject.subscribe('topic').then(() => {
      console.log('subscribe success to topic')
    }).catch((e) => {
      console.log(e)
    })

    pushObject.on('registration').subscribe((data: any) => {
      console.log('device token -> ' + data.registrationId);
      //TODO - send device token to server
    });

    pushObject.on('notification').subscribe((notification: any) => {
      console.log('Received a notification', notification)
    });

    pushObject.on('error').subscribe(error => …
Run Code Online (Sandbox Code Playgroud)

typescript ionic2 ionic3 angular

2
推荐指数
1
解决办法
840
查看次数

Ionic 3:使用蓝牙打印机打印图像

我目前正在努力使用我们的 Ionic3 应用程序。我似乎无法找到如何使用 BT 打印机和蓝牙串行插件打印图像。打印文本就好了。

我们正在使用此文档(由我的前同事找到)驱动程序命令文档测试 RPP02N-BU 打印机 ,但我无法获得

选择位图模式

上班。

我们首先将上传的图像调整为不超过 300 像素,然后将其转换为黑白。打印时,我们迭代图像并创建二进制字符串,然后将其转换为字节。这些字节跟在 SELECT BIT IMAGE MODE 命令之后。

我们的代码(在 TypeScript 中)如下:

/**
 * Image to printer command
 * @param image 
 */
public static getImagePrintData(image: HTMLImageElement): Buffer {
    // Initialize list of commands
    let command: number[] = [ 0x1b, 0x2a, 33, 255, 3 ];

    // Get image bytes
    let bytes = this.getImageBytes(image);

    // Add bytes to command
    bytes.forEach((byte) => command.push(byte));

    // Return command
    return new Buffer(command);
}

/** …
Run Code Online (Sandbox Code Playgroud)

printing image bluetooth typescript ionic3

2
推荐指数
1
解决办法
3945
查看次数

当高度超过最大高度时使 ion-textarea 可滚动

我正在尝试在我的应用中实现聊天。

我写了一个 autosizing ion-textarea 如下:查看

<ion-footer [keyboardAttach]="content">
  <ion-toolbar class="text-input">
    <ion-item no-lines>
      <ion-textarea autosize
        rows="1"
        placeholder="Votre message..."
        autocomplete="on"
        autocorrect="on"
        [(ngModel)]="message"
        >
      </ion-textarea>
      <button ion-button small icon-only round item-end color="secondary" (tap)="onSend()">
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-item>
  </ion-toolbar>
</ion-footer>
Run Code Online (Sandbox Code Playgroud)

CSS

ion-footer {
    ion-toolbar.toolbar.toolbar-ios {
      &.toolbar:last-child {
        padding-bottom: 0px;
        height: auto;
      }
    }
    ion-item.item-textarea {
      background-color: transparent;
    }
    .text-input {
      height: auto;
      div.input-wrapper {
        background-color: #fff;
        border-radius: 20px;
        textarea.text-input {
          margin-left: 8px;
          max-height: 100px;
        }
      }
    }
  }
Run Code Online (Sandbox Code Playgroud)

指示

import {ElementRef, HostListener, Directive, OnInit, ViewChild} …
Run Code Online (Sandbox Code Playgroud)

css textarea ionic-framework ionic2 ionic3

2
推荐指数
1
解决办法
7092
查看次数

“在 Angular|Ionic 中找不到 [自定义组件] 的组件工厂”

我正在使用带有延迟加载页面的 Ionic 3。尝试在页面内的组件中显示模式时,出现以下错误:

No component factory found for CourseEditorComponent. Did you add it to @NgModule.entryComponents?
Run Code Online (Sandbox Code Playgroud)

正如你可以看到下面下来,我已经添加了CourseEditorComponent作为entryComponent到courses.modules.ts,其中得到由进口dashboard.modules.ts

我对 Angular/Ionic 中使用自定义 entryComponents 的方式有什么误解吗?

等级制度

DashboardPage
-CoursesComponent
--CourseEditorComponent
--CourseCreatorComponent
-InstructorsComponent
Run Code Online (Sandbox Code Playgroud)

模块

仪表板.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DashboardPage } from './dashboard';
import { CoursesModule } from "./courses/courses.module";

@NgModule({
  declarations: [
    DashboardPage
  ],
  imports: [
    IonicPageModule.forChild(DashboardPage),
    CoursesModule
  ],
})
export class DashboardPageModule {}
Run Code Online (Sandbox Code Playgroud)

course.module.ts

import { NgModule } from '@angular/core';
import …
Run Code Online (Sandbox Code Playgroud)

ionic-framework ionic2 ionic3 angular

2
推荐指数
1
解决办法
4290
查看次数

离子 3 中离子范围的 onChange 错误

我有以下 html

<ion-item>
        <ion-range min="5" max="300" pin="true" [(ngModel)]="contrast" color="secondary" ionChange=“changeRange(contrast)”>
          <ion-icon range-left small name="contrast"></ion-icon>
          <ion-icon range-right name="contrast"></ion-icon>
        </ion-range>
</ion-item>
Run Code Online (Sandbox Code Playgroud)

结果是:

在此处输入图片说明

这是触发方法:

changeRange(valor){
    console.log(valor.value);

  }
Run Code Online (Sandbox Code Playgroud)

如您所见,我使用 ionChange 来执行 changeRange 方法。但是当我运行它时,我收到以下错误。

在此处输入图片说明

我究竟做错了什么?

html ionic-framework ionic2 ionic3 angular

2
推荐指数
1
解决办法
1636
查看次数

离子项目中文件夹 www、page、src 的作用是什么?

我是离子的新手。我发现在一些离子项目中,没有 src(app & pages) 文件夹,只有 www 文件夹。在检查了一些示例 ionic 项目后,src 文件夹似乎包含与 www 文件夹类似的组件。

请您解释一下这些文件夹之间的区别,它们可以一起使用吗?如果有关于离子框架架构的详细介绍,将不胜感激。

ionic-framework ionic3

2
推荐指数
1
解决办法
3075
查看次数

在 ionic 2/3 中禁用离子搜索栏

我想在 ionic 2/3 中禁用 ion-searchbar 以便只显示搜索栏但我们不能输入任何内容。我添加了,"disabled = true"但这不起作用。

你能提出一些建议吗?

javascript ionic-framework ionic2 ionic3 angular

2
推荐指数
1
解决办法
1876
查看次数