求一款vue插件,關于圖片放大的!

photoswipe

Cropper.js 主要針對移動端的

下面是我整理的一些api

const cropper = new Cropper(image, {
        aspectRatio: 1, // 圖片寬高比例
        viewMode: 0,    //裁剪框 只能在  2圖片內移動   默認是0
        // preview : $(".newImg"),    //截圖的顯示位置   型：String(jQuery選擇器)，默認值''
        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')); // 直接轉換成base64

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

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