Unduh image cropper - pengunduhan kode sumber image cropper

image cropper

Kode Sumber AI

1.0.0

Unduh

pemotong gambar

Plug-in pemangkasan gambar program mini berkinerja tinggi yang mendukung rotasi.

`1.功能强大。`

`2.性能超高超流畅，大图毫无卡顿感。`

`3.组件化，使用简单。`

`4.点击中间窗口实时查看裁剪结果。`

Demo Pengalaman

Persiapan awal

1. Tambahkan pemotong gambar ke file json

    "usingComponents" : {
       "image-cropper" : " ../image-cropper/image-cropper "
    },
    "navigationBarTitleText" : "裁剪图片" ,
    "disableScroll" : true

2. berkas wxml

 < image-cropper id =" image-cropper " limit_move =" {{true}} " disable_rotate =" {{true}} " width =" {{width}} " height =" {{height}} " imgSrc =" {{src}} " bindload =" cropperload " bindimageload =" loadimage " bindtapcut =" clickcut " > </ image-cropper >

3. Contoh sederhana

    Page ( {
        data : {
            src : '' ,
            width : 250 , //宽度
            height : 250 , //高度
        } ,
        onLoad : function ( options ) {
	    //获取到image-cropper实例
            this . cropper = this . selectComponent ( "#image-cropper" ) ;
            //开始裁剪
            this . setData ( {
                src : "https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg" ,
            } ) ;
            wx . showLoading ( {
                title : '加载中'
            } )
        } ,
        cropperload ( e ) {
            console . log ( "cropper初始化完成" ) ;
        } ,
        loadimage ( e ) {
            console . log ( "图片加载完成" , e . detail ) ;
            wx . hideLoading ( ) ;
            //重置图片角度、缩放、位置
            this . cropper . imgReset ( ) ;
        } ,
        clickcut ( e ) {
            console . log ( e . detail ) ;
            //点击裁剪框阅览图片
            wx . previewImage ( {
                current : e . detail . url , // 当前显示图片的http链接
                urls : [ e . detail . url ] // 需要预览的图片http链接列表
            } )
        } ,
    } )

Deskripsi parameter (atribut yang disorot menunjukkan perubahan dari versi sebelumnya, harap diperhatikan)

milik	jenis	Nilai bawaan	nilai	menggambarkan	Diperlukan
imgSrc	Rangkaian	tidak ada	Tak terbatas	Alamat gambar (jika gambar online, nama domain aman harus dikonfigurasi)	TIDAK
nonaktifkan_putar	Boolean	PALSU	benar/salah	Nonaktifkan rotasi pengguna (jika salah, disarankan untuk menyetel limit_move ke false secara bersamaan)	TIDAK
batas_pindah	Boolean	PALSU	benar/salah	Batasi rentang pergerakan gambar (kotak pemangkasan selalu ada di dalam gambar) (jika benar, disarankan untuk menyeteldisable_rotate ke true pada saat yang bersamaan)	TIDAK
lebar	Nomor	200	Jika lebar layar terlampaui, maka secara otomatis akan diubah menjadi lebar layar.	Memotong lebar bingkai	TIDAK
tinggi	Nomor	200	Jika melebihi tinggi layar, otomatis akan berubah menjadi tinggi layar.	Tinggi kotak tanam	TIDAK
lebar_maks	Nomor	300	Lebar maksimum kotak tanam	Lebar maksimum kotak tanam	TIDAK
max_height	Nomor	300	Ketinggian maksimum bingkai pemangkasan	Ketinggian maksimum bingkai pemangkasan	TIDAK
lebar_min	Nomor	100	lebar minimum kotak pangkas	lebar minimum kotak pangkas	TIDAK
min_height	Nomor	100	Tinggi minimum kotak tanam	Tinggi minimum kotak tanam	TIDAK
nonaktifkan_lebar	Boolean	PALSU	benar/salah	Kunci lebar kotak pangkas	TIDAK
nonaktifkan_tinggi	Boolean	PALSU	benar/salah	Kunci ketinggian kotak pangkas	TIDAK
nonaktifkan_rasio	Boolean	PALSU	benar/salah	Kunci rasio bingkai pangkas	TIDAK
skala_ekspor	Nomor	3	Tak terbatas	Proporsi gambar keluaran (relatif terhadap ukuran kotak pemangkasan)	TIDAK
kualitas	Nomor	1	0-1	Kualitas gambar yang dihasilkan	TIDAK
~~potong_atas~~	Nomor	tengah	selalu di layar	Margin atas kotak pangkas	TIDAK
~~potong_kiri~~	Nomor	tengah	selalu di layar	Kotak pemangkasan margin kiri	TIDAK
`img_width`	Nomor	Baik lebar maupun tinggi tidak diatur, dan sisi terkecil memenuhi kotak pemangkasan.	Mendukung % (tanpa menambahkan satuan ke px) (hanya mengatur lebar, tinggi bersifat adaptif)	Lebar gambar	TIDAK
`img_height`	Nomor	Baik lebar maupun tinggi tidak diatur, dan sisi terkecil memenuhi kotak pemangkasan.	Mendukung % (tanpa menambahkan satuan ke px) (hanya mengatur tinggi, lebar bersifat adaptif)	Tinggi gambar	TIDAK
skala	Nomor	1	Tak terbatas	Rasio zoom gambar	TIDAK
sudut	Nomor	0	(sudut=n*90 saat limit_move=true)	Sudut rotasi gambar	TIDAK
skala_min	Nomor	0,5	Tak terbatas	Rasio zoom minimum gambar	TIDAK
skala_maks	Nomor	2	Tak terbatas	Rasio zoom maksimum gambar	TIDAK
bindload	Fungsi	batal	nama fungsi	inisialisasi cropper selesai	TIDAK
bindimageload	Fungsi	batal	nama fungsi	Gambar dimuat, dan nilai yang dikembalikan adalah Objek{lebar, tinggi, jalur, jenis, dll.}	TIDAK
bindtapcut	Fungsi	batal	nama fungsi	Klik pada kotak pemangkasan tengah, kembalikan nilai Objek{src,lebar,tinggi}	TIDAK

Deskripsi fungsi

nama fungsi	parameter	nilai kembalian	menggambarkan	Parameter diperlukan
mengunggah	tidak ada	tidak ada	Panggil antarmuka gambar unggah wx dan mulailah memotong	TIDAK
dorongImg	src	tidak ada	Masukkan gambar dan mulailah memotong	Ya
dapatkanImg	Fungsi (fungsi panggilan balik)	`Object{url,width,height}`	Pangkas dan dapatkan gambarnya (ukuran gambar = lebar dan tinggi gambar * skala_ekspor)	Ya
~~setCutXY~~	X, Y	tidak ada	Atur posisi bingkai pemangkasan	Ya
setCutSize	lebar tinggi	tidak ada	Atur ukuran kotak pangkas	Ya
setCutCenter	tidak ada	tidak ada	Atur bingkai pemangkasan ke tengah	TIDAK
setSkala	skala	tidak ada	Atur rasio skala gambar (tidak terpengaruh oleh min_scale, max_scale)	Ya
setAngle	derajat	tidak ada	Atur sudut rotasi gambar (dengan efek transisi)	Ya
setTransformasi	{x,y,sudut,skala,potongX,potongY}	tidak ada	Perubahan gambar berdasarkan aslinya (skala dipengaruhi oleh min_scale, max_scale)	Lewati parameter sesuai kebutuhan
imgReset	tidak ada	tidak ada	Reset sudut, zoom, dan posisi gambar (dapat digunakan pada callback onloadImage)	TIDAK