JS:根据点击图片坐标，截取点击位置部分图片

从一个完整的大图中截取一小部分出来：

    /**
     * 根据点击坐标获取一个20x20像素的图片
     */
    const getScreenShotFromScrcpyVideo = ( x ,y ) => {

        // //获取点击图片坐标位置
        // const {x,y} = getCurLocation();

        var imgObject = new Image();

        //载入原图像
        /*----------------------------------------加载图片----------------------------------------------------*/
        const canvas = document.createElement("canvas");
        const canvasCtx = canvas.getContext("2d");
        const video = document.getElementById('scrcpy-video');
        // 默认生成图片大小
        let w;
        let h;
        let widthAndHeigh = device._rawValue.size.split('x');
        //获取到的屏幕尺寸长小于宽，是竖屏
        if (directionStatus.value === 0 || directionStatus.value === 180) {
            // 竖屏 针对RAC的设备，不管屏幕切换问题，默认设置宽高比16：9
            if (screenMode.value == 'Scrcpy') {
                console.error("creenMode.value")
                w = imgWidth;
                h = imgHeight;
            } else {
                w = 369;
                h = 800;
            }
        } else if (screenMode.value == 'Scrcpy'){
            w = imgHeight;
            h = imgWidth;
        }else{
            w = 800;
            h = 369;
        }
        canvas.width = w;
        canvas.height = h;
        canvasCtx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, w, h);
        /*----------------------------------------加载图片结束----------------------------------------------------*/
        imgObject = canvas ;

        onPreloadComplete();

        //当图片完成载入以后，重新绘制你要截取的那一部分
        function onPreloadComplete(){
            //创建一个20x20大小的图片
            var newImg = getImagePortion(imgObject, 40, 40, x - 40, y - 40, 2);
            console.error(newImg)

            //创建新的请求，发送至server端
            let formData = new FormData();
            formData.append('file', base64toFile(newImg, "fileName"));
            formData.append('type', 'keepFiles');
            axios
                .post('/folder/upload', formData, {headers: {'Content-type': 'multipart/form-data'}})
                .then((resp) => {
                    console.error(JSON.stringify(resp))
                    if (resp['code'] === 2000) {
                        //构建一个新的element控件元素
                        let newElement = {};
                        newElement.eleValue = resp['data'];
                        newElement.projectId = project.value['id'];
                        newElement.eleType = "image";
                        newElement.eleName = "Element-Image-" + generateTimeReqestNumber();
                        newElement.eleDeviceModel = "MeitsMF4";
                        newElement.eleAppName = "";
                        newElement.eleGuiName = "";

                        //图片上传成功以后，再次调用自动添加控件元素的方法
                        axios
                            .post('/controller/elements/save?text="', newElement, {headers: {'Content-type': 'multipart/form-data'}})
                            .then((resp) => {
                                if (resp['code'] === 2000) {
                                    //图片上传成功以后，再次调用自动添加控件元素的方法
                                    ElMessage.success({
                                        message: '录制功能控件快照上传成功...',
                                    });
                                }
                            });
                    }
                });

        }
        /**
         * 根据当前时间生成一个对应的时间序列
         */
        function generateTimeReqestNumber() {
            var date = new Date();
            return date.getFullYear().toString() + pad2(date.getMonth() + 1) + pad2(date.getDate()) + pad2(date.getHours()) + pad2(date.getMinutes()) + pad2(date.getSeconds());
        }

        function pad2(n) { return n < 10 ? '0' + n : n }

        //图像截取
        function getImagePortion(imgObj, newWidth, newHeight, startX, startY, ratio){
            /* the parameters: - the image element - the new width - the new height - the x point we start taking pixels - the y point we start taking pixels - the ratio */
            //set up canvas for thumbnail
            var tnCanvas = document.createElement('canvas');
            tnCanvas.setAttribute("style","width: 100px;height: 100px;");
            var tnCanvasContext = tnCanvas.getContext('2d');
            tnCanvas.width = newWidth; tnCanvas.height = newHeight;

            /* use the sourceCanvas to duplicate the entire image. This step was crucial for iOS4 and under devices. Follow the link at the end of this post to see what happens when you don’t do this */
            var bufferCanvas = document.createElement('canvas');
            var bufferContext = bufferCanvas.getContext('2d');
            bufferCanvas.width = imgObj.width;
            bufferCanvas.height = imgObj.height;
            bufferContext.drawImage(imgObj, 0, 0);

            /* now we use the drawImage method to take the pixels from our bufferCanvas and draw them into our thumbnail canvas */
            tnCanvasContext.drawImage(bufferCanvas, startX,startY,newWidth * ratio, newHeight * ratio,0,0,newWidth,newHeight);
            console.error(tnCanvas)
            return tnCanvas.toDataURL();
        }

        /**
         * 将base64转换为图片
         */
        function base64toFile(data, fileName) {
            const dataArr = data.split(",");
            const byteString = atob(dataArr[1]);
            const options = {
                type: "image/jpeg",
                endings: "native"
            };
            const u8Arr = new Uint8Array(byteString.length);
            for (let i = 0; i < byteString.length; i++) {
                u8Arr[i] = byteString.charCodeAt(i);
            }
            return new File([u8Arr], fileName + ".jpg", options);//返回文件流
        }

    }