首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >从页面中截取图像

从页面中截取图像
EN

Stack Overflow用户
提问于 2019-07-15 09:07:06
回答 1查看 719关注 0票数 0

我想用角度6+构建图像截取功能。我的要求是-

  1. 在网页上,用户可以使用鼠标拖动(矩形格式)选择一个区域。
  2. 捕获选定区域并在剪贴板中添加为图像。
  3. 当用户执行诸如“从剪贴板复制”等操作时,将检索上次保存到剪贴板的图像。

预先感谢您的投入。

EN

回答 1

Stack Overflow用户

发布于 2019-07-18 07:57:16

我已经实施了这个解决方案,虽然它不是100%,但可以达到目的;)添加我的解决方案,可能是它可以帮助某人或有人可以建议改进。

这是我的解决办法-

使用两个角库. html2canvas实现解决方案--捕捉屏幕或目标html标记的屏幕截图。有角的作物-裁剪图像(htl2cavas输出将输入到裁剪)。此外,您还必须添加由角型cropperjs使用的依赖型cropperjs。

解决方案代码-

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

代码语言:javascript
运行
复制
<div class="row">
    <div  #screen>
  // add you code ()
</div>
代码语言:javascript
运行
复制
captureView() {
    html2canvas(this.screen.nativeElement).then(canvas => {
      this.imageUrl = canvas.toDataURL('image/png');
    });
  }

//捕获图像并将值赋值给变量,这些变量可以输入到角裁剪组件中。

代码语言:javascript
运行
复制
<angular-cropper #angularCropper [cropperOptions]="angularCropperConfig" [imageUrl]="imageUrl" *ngIf="imageUrl"></angular-cropper>
代码语言:javascript
运行
复制
@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());
  }

//此输出将用于要粘贴裁剪图像的位置

模板代码--

代码语言:javascript
运行
复制
<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>

组件代码-

代码语言:javascript
运行
复制
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 });
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57036487

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档