IONIC3 修改拍照插件cordova-plugin-camera-preview 添加水印

渃曦＾

已于 2023-03-07 14:10:52 修改

阅读量381

点赞数

分类专栏： ionic 文章标签： java typescript android node.js Powered by 金山文档

于 2023-03-06 17:17:59 首次发布

本文链接：https://blog.csdn.net/qq_23527809/article/details/129364100

版权

ionic 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.插件安装

cordova plugin add cordova-plugin-camera-preview
npm install @ionic-native/camera-preview

二.目录说明

1.ionic 插件目录主要修改入参

2.cordova插件目录主要修改入参、拍照逻辑

三.源码修改

1.ionic插件修改@awesome-cordova-plugins 增加入参项

修改ngx文件加下的index.d.ts

在 CameraPreviewOptions 中增加需要的参数

2.cordova 插件修改 cordova-plugin-camera-preview

1.增加入参项

修改typescript文件夹下 CameraPreview.d.ts 的CameraPreviewStartCameraOptions。

※与ionic插件修改一样入参名称和类型要保持一致。

修改android文件夹下CameraPreview.java

在execute()方法中增加startCamera()方法调用的参数

在页面回调onRequestPermissionResult() 中增加startCamera()方法调用的参数

※参数的类型和数组长度要与CameraPreview.d.ts中一致

在startCamera()方法中把新加的参数传入CameraActivity.java中

4.在CameraActivity.java中增加新入参全局变量

2.修改拍照逻辑 CameraActivity.java

思路

相机预览时使用画笔Paint 画布Canvas 把水印添加到相机的画面上做到相机预览时能看到水印

拍照完成后把水印和照片合并成一个图片返回给ionic

画水印

private Bitmap setWatermark() {
    int textSize = 32; // 设置字体大小
    int showHeight = height; // 根据相机预览高度来设置水印在屏幕的高度
    String familyName = "宋体"; // 设置字体
    Typeface typeface = Typeface.create(familyName,Typeface.NORMAL);
    String title1 = "时  间";
    String title2 = "地  点";
    String title3 = "天  气";
    String title4 = "拍摄人";
    String title5 = "设  备";
    // width相机预览的宽度 height相机预览的宽度 由ionic传入
    Bitmap newBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas mCanvas = new Canvas(newBitmap);
    if (!isShowWaterMark) { // 如果不显示水印 返回一个空白的画布
      return newBitmap;
    }

    PaintFlagsDrawFilter mSetfil = new PaintFlagsDrawFilter(0,Paint.FILTER_BITMAP_FLAG);
    mCanvas.setDrawFilter(mSetfil);
    // ***加入文字-----------------------------
    Paint textPaint = new Paint();
    textPaint.setColor(Color.WHITE); //设置字体颜色
    textPaint.setTextSize(textSize); //设置字体大小
    textPaint.setTypeface(typeface);
    textPaint.setTextAlign(Paint.Align.LEFT);
    textPaint.setAntiAlias(true); // 字体锯齿
    mCanvas.drawText(title1,  5, showHeight-250, textPaint);
    mCanvas.drawText(title2,  5, showHeight-190, textPaint);
    mCanvas.drawText(title3,  5, showHeight-130, textPaint);
    mCanvas.drawText(title4,  5, showHeight-70, textPaint);
    mCanvas.drawText(title5,  5, showHeight-10, textPaint);
    // ***加入图片-----------------------------
    AssetManager assetManager = getActivity().getAssets();
    InputStream is = null;
    try {
      is = assetManager.open("www/assets/img/cloud.png");
    } catch (IOException e) {
      e.printStackTrace();
    }
    Bitmap bitmap = BitmapFactory.decodeStream(is);
    Bitmap mBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true);
    mBitmap.setDensity(bitmap.getDensity()*2);// 图片放大比例
    mCanvas.drawBitmap(mBitmap, 5, showHeight-350, null);
    //保存画布
    mCanvas.save(); 
    mCanvas.restore();   
    return newBitmap;
  }

创建相机预览时把水印添加到前背景上

 private void createCameraPreview(){
    if(mPreview == null) {
      setDefaultCameraId();

      //set box position and size
      FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(width, height);
      layoutParams.setMargins(x, y, 0, 0);
      frameContainerLayout = (FrameLayout) view.findViewById(getResources().getIdentifier("frame_container", "id", appResourcesPackage));
      frameContainerLayout.setLayoutParams(layoutParams);

      //video view
      mPreview = new Preview(getActivity());
      mainLayout = (FrameLayout) view.findViewById(getResources().getIdentifier("video_view", "id", appResourcesPackage));
      mainLayout.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT));
      mainLayout.addView(mPreview);
      mainLayout.setEnabled(false);
      mainLayout.setForeground(new BitmapDrawable(setWatermark()));// 添加水印
        if(toBack == false) {
            this.setupTouchAndBackButton();
        }

    }
  }

拍照成功后把水印与图片合并到一起

创建一个新的画布大小与相机预览的width，height一样

把照片画到画布上

把水印画到画布上

public Bitmap combineBitmap(Bitmap background, Bitmap foreground)
  {
    int bgWidth = background.getWidth();
    int bgHeight = background.getHeight();
    int fgHeight = foreground.getHeight();
    //创建一个新的画布
    Bitmap map = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(map);
    /*因为拍照时设置的图片width  height与画布大小不一致 会出现黑边 所以做了一下等比放大
     * 这会影响图片的清晰度       
     */
    Matrix matrix = new Matrix();
    matrix.postScale((float) width/bgWidth, (float) height/bgHeight);//等比放大
    Bitmap mBitmap = Bitmap.createBitmap(background,0,0,bgWidth,bgHeight,matrix,true);// 画图片
    canvas.drawBitmap(mBitmap, 0, 0, null);
    canvas.drawBitmap(foreground, 1 ,(height - fgHeight), null);// 画水印 (height-fgHeight)相当于画布设置水印高度

    canvas.save();
    canvas.restore();
    return map;
  }

修改拍照回调jpegPictureCallback把有水印的图片返回给ionic插件就大功告成了

Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
bitmap.compress(CompressFormat.JPEG, 100, outputStream);
Bitmap  bitmap2 =  combineBitmap(bitmap, setWatermark());// 合并图片与水印
ByteArrayOutputStream outputStream1 = new ByteArrayOutputStream();
bitmap2.compress(CompressFormat.JPEG, 100, outputStream1);
data = outputStream1.toByteArray();
String encodedImage = Base64.encodeToString(data, Base64.NO_WRAP);
eventListener.onPictureTaken(encodedImage);