Question

我想使用Angular 6+构建图像截图功能。我的要求就像-

在网页上，用户可以使用鼠标拖动（矩形格式）选择一个区域。
捕获所选区域并作为图像添加到剪贴板中。
当用户执行“从剪贴板复制”之类的操作时，将检索上次保存到剪贴板的图像。

预先感谢您的输入。

Answer 1

尽管不是100％，但我已经实现了解决方案，但可以达到目的；）。添加我的解决方案，也许可以帮助某人或某人可以提出改进建议。

这是我的解决方法-

使用2个角库实现解决方案一种。 html2canvas-捕获屏幕或目标html标签的屏幕快照。 b。 angular-cropperjs-裁剪图像（将输入htl2cavas进行裁剪）。另外，您还必须添加angular-cropperjs使用的依赖项cropperjs。

解决方案代码-

------------ html2canvas的模板代码-------------------

<div class="row">
    <div  #screen>
  // add you code ()
</div>

----------------组件代码或.ts文件代码--------------- @ViewChild（'screen'）屏幕：ElementRef;

captureView() {
    html2canvas(this.screen.nativeElement).then(canvas => {
      this.imageUrl = canvas.toDataURL('image/png');
    });
  }

//捕获图像并将值分配给变量，可以将其输入到角度裁剪器组件中。

-------------- angular-cropperjs的模板代码--------------------------- ----

<angular-cropper #angularCropper [cropperOptions]="angularCropperConfig" [imageUrl]="imageUrl" *ngIf="imageUrl"></angular-cropper>

----------- angular-cropperjs的组件代码----------------------------- < / p>

@ViewChild('angularCropper') public angularCropper: CropperComponent;
  angularCropperConfig = {
    aspectRatio : 16/9,
    dragMode : 'drag',
    background : false,
    movable: true,
    rotatable : false,
    scalable: true,
    zoomable: false,
    viewMode: 1,
    checkImageOrigin : true,
    checkCrossOrigin: true
  };


selectImage() { 
cropImageOutput = this.angularCropper.cropper.getCroppedCanvas().toDataURL().toString());
  }

//这将用于您要粘贴裁切图像的地方

-------------------您要在其中使用的最终代码-------------------- ---

模板代码---

<div>
              <canvas style="border:1px solid grey;" id="mycanvas"></canvas>
              </div>
              <div class="col-xl-1 col-md-1 col-xs-12 pull-left">
                <button mat-raised-button color="primary" (click)="addImage()">add image</button>
              </div>

组件代码-

addImage(cropImageOutput ) {
const imageBlob = convertBase64ToBlob(cropImageOutput );
 if (imageBlob) {
              const canvas = document.getElementById('mycanvas');
              const ctx = canvas.getContext('2d');

              // Create an image to render the blob on the canvas
              const img = new Image();

              // Once the image loads, render the img on the canvas
              img.onload = function () {
                // Update dimensions of the canvas with the dimensions of the image
                canvas.width = this.width;
                canvas.height = this.height;

                // Draw the image
                ctx.drawImage(img, 0, 0);
              };

              // Crossbrowser support for URL
              const URLObj = window.URL || window.webkitURL;

              // Creates a DOMString containing a URL representing the object given in the parameter
              // namely the original Blob
              img.src = URLObj.createObjectURL(imageBlob);
            }
  }

/**
 * CONVERT BASE64 TO BLOB
 * @param Base64Image Pass base64 image data to convert into the blob
 */
function convertBase64ToBlob(base64Image: string) {
  // SPLIT INTO TWO PARTS
  const parts = base64Image.split(';base64,');
  // HOLD THE CONTENT TYPE
  const imageType = parts[0].split(':')[1];
  // DECODE BASE64 STRING
  const decodedData = window.atob(parts[1]);
  // CREATE UNIT8ARRAY OF SIZE SAME AS ROW DATA LENGTH
  const uInt8Array = new Uint8Array(decodedData.length);
  // INSERT ALL CHARACTER CODE INTO UINT8ARRAY
  for (let i = 0; i < decodedData.length; ++i) {
    uInt8Array[i] = decodedData.charCodeAt(i);
  }
  // RETURN BLOB IMAGE AFTER CONVERSION
  return new Blob([uInt8Array], { type: imageType });
}

页面截图

1 个答案:

//捕获图像并将值分配给变量，可以将其输入到角度裁剪器组件中。