我想用角度6+构建图像截取功能。我的要求是-
预先感谢您的投入。
发布于 2019-07-18 07:57:16
我已经实施了这个解决方案,虽然它不是100%,但可以达到目的;)添加我的解决方案,可能是它可以帮助某人或有人可以建议改进。
这是我的解决办法-
使用两个角库. html2canvas实现解决方案--捕捉屏幕或目标html标记的屏幕截图。有角的作物-裁剪图像(htl2cavas输出将输入到裁剪)。此外,您还必须添加由角型cropperjs使用的依赖型cropperjs。
解决方案代码-
html2canvas的模板代码-html2canvas的模板代码
<div class="row">
<div #screen>
// add you code ()
</div>
captureView() {
html2canvas(this.screen.nativeElement).then(canvas => {
this.imageUrl = canvas.toDataURL('image/png');
});
}
//捕获图像并将值赋值给变量,这些变量可以输入到角裁剪组件中。
<angular-cropper #angularCropper [cropperOptions]="angularCropperConfig" [imageUrl]="imageUrl" *ngIf="imageUrl"></angular-cropper>
@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 });
}
https://stackoverflow.com/questions/57036487
复制相似问题