photoswipe

Cropper.js 主要針對(duì)移動(dòng)端的

下面是我整理的一些api

const cropper = new Cropper(image, {
        aspectRatio: 1, // 圖片寬高比例
        viewMode: 0,    //裁剪框 只能在  2圖片內(nèi)移動(dòng)   默認(rèn)是0
        // preview : $(".newImg"),    //截圖的顯示位置   型：String(jQuery選擇器)，默認(rèn)值''
        crop: function(event) {     // 每次操作完成后執(zhí)行
            console.log(event.detail.x);
            console.log(event.detail.y);
            console.log(event.detail.width);
            console.log(event.detail.height);
            
            cropper.getCroppedCanvas();

            cropper.getCroppedCanvas({  //  圖片輸出
                width: 300,
                height: 300,
                minWidth: 256,
                minHeight: 256,
                maxWidth: 4096,
                maxHeight: 4096,
                fillColor: '#fff',
                imageSmoothingEnabled: false,
                imageSmoothingQuality: 'high',
            });


            if (!HTMLCanvasElement.prototype.toBlob) {  // 瀏覽器兼容性檢查， 如果不支持toBlob 則需要重寫
                Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
                    value: function (callback, type, quality) {

                        var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
                            len = binStr.length,
                            arr = new Uint8Array(len);

                        for (var i=0; i<len; i++ ) {
                        arr[i] = binStr.charCodeAt(i);
                        }

                        callback( new Blob( [arr], {type: type || 'image/png'} ) );
                    }
                });
            }

            $(".img").attr("src" , cropper.getCroppedCanvas().toDataURL('image/jpeg')); // 直接轉(zhuǎn)換成base64

            // cropper.getCroppedCanvas().toBlob((blob) => {

            // });
        },
        build: function (e) { //加載開(kāi)始  
            //可以放你的過(guò)渡 效果  
            console.log(111111111)
        }, 
        built: function (e) { //加載完成  
        },
        checkCrossOrigin: true,    //插件會(huì)檢測(cè)圖片的源，如果是跨域圖片，圖片元素會(huì)被添加crossOrigin class，并會(huì)為圖片的url添加一個(gè)時(shí)間戳來(lái)使getCroppedCanvas變?yōu)榭捎?        minContainerWidth: 300,
        minContainerHeight:300,
        minCanvasWidth: 300,
        minCanvasHeight: 300,
        minCropBoxWidth : 300,  //   裁剪框的最小寬度。   注意：此大小是相對(duì)于頁(yè)面而不是圖像。
        minCropBoxHeight: 300,   // 裁剪框的最小高度    注意：此大小是相對(duì)于頁(yè)面而不是圖像。
        rotatable : false ,     // 是否允許旋轉(zhuǎn)
        guides:false,   // 默認(rèn)true 顯示裁剪框上方的虛線。
        center: false, // 默認(rèn)true  是否顯示裁剪框 中間的+ 
        background : false,// 容器是否顯示網(wǎng)格背景  
        dragMode: "move",       //可以拖動(dòng)圖片  crop    'none': do nothing  圖片就不能拖動(dòng)了   'crop': create a new crop box  當(dāng)鼠標(biāo) 點(diǎn)擊一處時(shí)根據(jù)這個(gè)點(diǎn)重新生成一個(gè) 裁剪框
        modal : false,       // 默認(rèn)值true。是否在剪裁框上顯示黑色的模態(tài)窗口
        cropBoxMovable :false,   //是否允許拖動(dòng)裁剪框 
        cropBoxResizable :false, //是否允許拖動(dòng) 改變裁剪框大小   
        toggleDragModeOnDblclick: false,    //在裁剪器上單擊兩次時(shí)，可以在“裁剪”和“移動(dòng)”之間切換拖動(dòng)模式。
    });