精品欧美一区二区三区在线观看 _久久久久国色av免费观看性色_国产精品久久在线观看_亚洲第一综合网站_91精品又粗又猛又爽_小泽玛利亚一区二区免费_91亚洲精品国偷拍自产在线观看 _久久精品视频在线播放_美女精品久久久_欧美日韩国产成人在线

如何在React Native中實(shí)現(xiàn)類(lèi)Instagram濾鏡效果？

譯文 精選
作者： 崔皓
開(kāi)發(fā) 前端
本文通過(guò)分步驟的指南，說(shuō)明如何在React Native中整合圖片編輯，并實(shí)現(xiàn)類(lèi)Instagram濾鏡的效果。
譯者 | 崔皓

?審校 | 孫淑娟

開(kāi)篇

本文通過(guò)分步驟的指南，說(shuō)明如何在React Native中整合圖片編輯，并實(shí)現(xiàn)類(lèi)Instagram濾鏡的效果。

在Instagram上，你可以很容易地使用濾鏡功能，并迅速得到想要的結(jié)果。濾鏡功能很好地修改照片，讓人們得到想要的效果。一些用戶想要在自定義的React Native中實(shí)現(xiàn)類(lèi)似的濾鏡效果。也就是說(shuō)將Instagram的濾鏡應(yīng)用到React Native 程序中。

為了滿足這個(gè)要求，本文編寫(xiě)了一個(gè)分步驟的指南，說(shuō)明如何在React Native中整合圖片編輯，實(shí)現(xiàn)類(lèi)似Instagram濾鏡的功能。

我們的開(kāi)發(fā)人員在對(duì)React Native中的各種過(guò)濾器庫(kù)進(jìn)行廣泛研究之后，并沒(méi)有找到理想的實(shí)現(xiàn)效果。于是，他們想出了在React Native中構(gòu)建圖像濾鏡的特別指南。

就讓我們手捧指南，從這里出發(fā)吧！

前提條件

沒(méi)有特別的要求，只要確保React Native已經(jīng)安裝，并保證項(xiàng)目已經(jīng)創(chuàng)建。

雖然，安裝React Native和設(shè)置并非易事，由于本文主題在如何進(jìn)行圖片編輯，因此不展開(kāi)說(shuō)React Native和設(shè)置，如果有需要可以訪問(wèn)??React Native官網(wǎng)??，獲取更多信息。

安裝相關(guān)庫(kù)

在應(yīng)用程序中，需要三個(gè)主要功能；裁剪、過(guò)濾和下載。為了實(shí)現(xiàn)這些功能，我們的開(kāi)發(fā)人員已經(jīng)選擇了三個(gè)最好的庫(kù)來(lái)支持React Native中的濾鏡功能。

1.圖像裁剪

圖像裁剪允許按照尺寸自由調(diào)整裁剪圖像。它是移動(dòng)應(yīng)用開(kāi)發(fā)不可獲缺的重要組成部分。我們可以通過(guò)??Crop Picker Library??來(lái)獲得裁剪圖片的功能。該庫(kù)還提供了視頻編輯功能。

2.圖像過(guò)濾器

我們使用 ??React Native Image Filter Kit?? 來(lái)處理應(yīng)用程序中的圖像過(guò)濾。基于該工具包，我們創(chuàng)建了一個(gè)特殊的代碼來(lái)生成20多個(gè)過(guò)濾器。

3.圖片下載

為了分享修改后的圖片，人們需要將其下載到手機(jī)上。這個(gè)功能可以從 ??React Native Cameraroll Library?? 庫(kù)中獲得，該庫(kù)可以幫助開(kāi)發(fā)者將過(guò)濾后的圖片保存在iOS和Android的照片庫(kù)中。

核心功能開(kāi)發(fā)指南

一旦上述庫(kù)安裝好之后，就可以開(kāi)始核心功能的開(kāi)發(fā)了。接下來(lái)，讓我們進(jìn)入編碼部分，實(shí)現(xiàn)既定的里程碑。

如圖 1 所示，這里列出了文件夾結(jié)構(gòu)，它可以幫助我們理解文件之間的關(guān)系以及需要實(shí)現(xiàn)的功能。

圖1：代碼文件結(jié)構(gòu)

第1步：調(diào)用手機(jī)相冊(cè)

創(chuàng)建文件夾名為 "ChooseImage"。接下來(lái)，添加 "index.jsx "文件。為了從手機(jī)圖庫(kù)中獲取圖片，在'index.jsx'文件中添加以下代碼。

import React, { useState } from 'react';

import {

  Image,

  Alert,

  SafeAreaView,

  StyleSheet,

  Text,

  TouchableOpacity,

  View,

} from 'react-native';

import { launchImageLibrary } from 'react-native-image-picker';

import {

  widthPercentageToDP as wp,

  heightPercentageToDP as hp,

} from 'react-native-responsive-screen';

import Constants from '../../Constants/Constants';

import Button from '../../Components/Button';

import Loader from '../../Components/Loader';

import ImagePicker from 'react-native-image-crop-picker';



const CreatePost = ({ navigation }) => {



  const [thumbnail, setThumbnail] = useState({});

  const [loaderVisible, setLoaderVisible] = useState(false);



  const onChooseImage = async (selectionType) => {





    const options = {

      cameraType: 'back',

      mediaType: selectionType,

      includeBase64: true,

    };

    const result = await launchImageLibrary(options);

    if (!result.didCancel && result.assets) {

      if (selectionType === 'photo') {

        const photoData = {

          uri: result.assets[0].uri,

          type: result.assets[0].type,

          name: result.assets[0].fileName,

        };

        setThumbnail(photoData);

      }

    }

    if (result.errorMessage) console.log('error');

  };



  const handleNextStepClick = async () => {

    if (!thumbnail.length) {

      setLoaderVisible(false);

      if (!Object.keys(thumbnail).length) {

        Alert.alert('Please add thumbnail image');

        return;

      } else {

        return ImagePicker.openCropper({

          includeBase64: true,

          path: thumbnail,

          cropping: false,

          freeStyleCropEnabled: true,

          compressImageQuality: 0.8,

          showCropFrame: true,

          mediaType: 'photo',

        }).then(image => {

          navigation.navigate('FilterScreen', { imageData: image });

        })

      }

    }

  };



  return (

    <SafeAreaView

      style={styles.safeView}>

      <View

        style={styles.imageView}>

        {Object.keys(thumbnail).length ? (

          <>

            <View

              style={styles.insideView}>

              <Image

                source={{ uri: thumbnail?.uri }}

                style={styles.thumbImage}

                resizeMode={'contain'}

              />

            </View>

            <View

              style={styles.editView}>

              <TouchableOpacity

                activeOpacity={0.6}

                onPress={() => onChooseImage('photo')}

                style={{

                  ...styles.addLessonBtnContainer,

                  marginEnd: 7,

                }}>

                <Image

                  source={require('../../Assests/icon_edit.png')}

                  resizeMode="contain"

                  style={styles.editImage}

                />

              </TouchableOpacity>

              <TouchableOpacity

                activeOpacity={0.6}

                onPress={() => setThumbnail({})}

                style={styles.addLessonBtnContainer}>

                <Image

                  source={require('../../Assests/delete.png')}

                  resizeMode="contain"

                  style={styles.editImage}

                />

              </TouchableOpacity>

            </View>

          </>

        ) : (

          <>

            <View style={{ ...styles.pickContainer, }}>

              <TouchableOpacity

                onPress={() => onChooseImage('photo')}

                activeOpacity={0.7}>

                <View style={styles.galleryView}>

                  <Image

                    source={require('../../Assests/Pick.png')}

                    style={styles.galleryImg}

                    resizeMode="contain"

                  />

                </View>

              </TouchableOpacity>

            </View>

            <View

              style={styles.postTextView}>

              <Text style={styles.introText}>

                {Constants.create_post_story}

              </Text>

            </View>

          </>

        )}

      </View>

      <View style={styles.buttonView}>

        <Button

          title={Constants.next}

          onclick={handleNextStepClick}

          style={styles.button_next}

        />

      </View>

      <Loader titleText={''} visible={loaderVisible} />

    </SafeAreaView>

  );

};



const styles = StyleSheet.create({

  button_next: {

    textTransform: 'uppercase',

    fontSize: wp('5%'),

    color: 'white',

    marginHorizontal: wp('7%')

  },

  editView: {

    justifyContent: 'flex-end',

    alignItems: 'center',

    marginTop: wp('5%'),

    alignSelf: 'flex-end',

    display: 'flex',

    flexDirection: 'row',

  },

  imageView: {

    paddingHorizontal: wp('5%'),

    paddingVertical: wp('10%'),

    backgroundColor: '#FFFFFF',

    marginTop: wp('5%'),

    width: wp('100%'),

  },

  insideView: {

    width: '100%',

    justifyContent: 'center',

    alignItems: 'center',

  },

  thumbImage: {

    width: wp('100%'),

    height: wp('80%'),

  },

  editImage: {

    width: wp('4.5%'),

    height: wp('4.5%'),

    tintColor: '#FFFFFF',

  },

  galleryView: {

    height: wp('20%'),

    width: wp('20%'),

    backgroundColor: '#FF701F',

    borderRadius: 40,

    justifyContent: 'center',

    alignItems: 'center'

  },

  galleryImg: {

    height: wp('7%'),

    width: wp('7%'),

    tintColor: 'white'

  },

  postTextView: {

    marginTop: wp('5%'),

  },

  safeView: {

    flex: 1,

    backgroundColor: '#fff',

  },

  buttonView: {

    marginTop: wp('7%'),

    marginBottom: wp('3%')

  },

  pickContainer: {

    borderWidth: 1,

    borderColor: '#DFDFDF',

    marginTop: hp('10%'),

    justifyContent: 'center',

    alignItems: 'center',

    borderStyle: 'dashed',

    width: '100%',

    paddingVertical: wp('7%'),

  },

  addLessonBtnContainer: {

    backgroundColor: '#FF701F',

    borderRadius: 4,

    paddingHorizontal: wp('3%'),

    paddingVertical: wp('2%'),

  },

  introText: {

    textTransform: 'uppercase',

    textAlign: 'center',

    textAlignVertical: 'center',

    color: '#1F1F1F',

    fontSize: wp('5%'),

  },

});



export default CreatePost;

輸出

一旦完成上述代碼，并將其添加到之后，你就可以看到如圖2所示內(nèi)容。

圖2：調(diào)用手機(jī)相冊(cè)

第2步：圖像裁剪和調(diào)整大小

在第一步中，我們已經(jīng)在NEXT "按鈕上添加了一段代碼。因此，當(dāng)你點(diǎn)擊“NEXT”對(duì)照片進(jìn)行裁剪時(shí)，就會(huì)打開(kāi)對(duì)應(yīng)的用戶界面。用戶可以調(diào)整圖片的大小，也可以旋轉(zhuǎn)它，總之可以對(duì)其進(jìn)行編輯。

選擇器提供各種圖像比例供用戶選取。一旦用戶點(diǎn)擊了選項(xiàng)按鈕，就會(huì)出現(xiàn)一個(gè)動(dòng)作表視圖。現(xiàn)在，用戶可以選擇一個(gè)預(yù)定義的比例對(duì)照片進(jìn)行裁剪了。

第3步：創(chuàng)建圖像過(guò)濾器

現(xiàn)在，選擇和裁剪功能已經(jīng)準(zhǔn)備好了。接下來(lái)，是時(shí)候添加圖像過(guò)濾功能了?，F(xiàn)在讓我們創(chuàng)建一個(gè)新的文件夾，并命名為Filter Image"。再次，在新文件夾下面創(chuàng)建一個(gè)文件

import React, { useRef, useState, useEffect } from 'react';

import {

  widthPercentageToDP as wp,

  heightPercentageToDP as hp,

} from 'react-native-responsive-screen';

import {

  FlatList,

  Image,

  SafeAreaView,

  StyleSheet,

  Text,

  TouchableOpacity,

  ImageBackground,

  View,

} from 'react-native';

import { FILTERS } from '../../Helpers/Filters';

import Button from '../../Components/Button';

import Constants from '../../Constants/Constants';

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';



const FilterScreen = ({ navigation, route }) => {



  const [selectedFilterIndex, setIndex] = useState(0);

  const [image, SetImage] = useState('')

  const [thumbnail, setThumbnail] = useState({});



  useEffect(() => {

    getImageFromNavigation()

  })



  const getImageFromNavigation = () => {

    if (route?.params?.imageData) {

      setThumbnail(route?.params?.imageData)

    }

  }



  const onExtractImage = ({ nativeEvent }) => {

    SetImage(nativeEvent.uri)

    extractedUri.current = nativeEvent.uri;

  };



  const onSelectFilter = selectedIndex => {

    setIndex(selectedIndex);

  };



  const extractedUri = useRef(thumbnail?.path);



  const handleNextStepClick = async () => {

    if (selectedFilterIndex === 0) {

      navigation.navigate('ViewImage', { imageString: thumbnail })

    } else {

      console.log('goinfFromHere');

      navigation.navigate('ViewImage', { imageString: image })

    }

  };





  const renderFilterComponent = ({ item, index }) => {

    const FilterComponent = item.filterComponent;

    const image = (

      <Image

        style={styles.filterSelector}

        source={{ uri: thumbnail?.path }}

        defaultSource={require('../../Assests/Pick.png')}

      />

    );

    return (

      <TouchableOpacity onPress={() => onSelectFilter(index)}>

        <Text style={styles.filterTitle}>{item.title}</Text>

        <FilterComponent image={image} />

      </TouchableOpacity>

    );

  };



  const SelectedFilterComponent = FILTERS[selectedFilterIndex].filterComponent;



  return (

    <>

      <SafeAreaView

        style={styles.safeView}>

        <ImageBackground

          source={require('../../Assests/image_background.png')}

          style={styles.container}>



          <KeyboardAwareScrollView

            contentContainerStyle={styles.keyboardContainer}

            resetScrollToCoords={{ x: 0, y: 0 }}>



            {selectedFilterIndex === 0 ? (

              <Image

                style={styles.default_Img}

                source={{ uri: thumbnail?.path }}

                resizeMode='contain'

              />

            ) : Object.keys(thumbnail).length && (

              <SelectedFilterComponent

                onExtractImage={onExtractImage}

                extractImageEnabled={true}

                image={

                  <Image

                    style={styles.default_Img}

                    source={{ uri: thumbnail?.path }}

                    resizeMode='contain'

                  />

                }

              />

            )}

            <FlatList

              data={FILTERS}

              keyExtractor={item => item.title}

              showsHorizontalScrollIndicator={false}

              horizontal={true}

              renderItem={renderFilterComponent}

            />

            <View style={styles.buttonView}>

              <Button

                title={Constants.next}

                onclick={handleNextStepClick}

                style={{ textTransform: 'uppercase' }}

              />

            </View>

          </KeyboardAwareScrollView>

        </ImageBackground>

      </SafeAreaView>

    </>

  );

};

const styles = StyleSheet.create({

  default_Img: {

    flex: 1,

    width: wp('100%'),

    height: hp('50%'),

    alignSelf: 'center',

    alignContent: 'center'

  },

  keyboardContainer: {

    width: wp('90%'),

  },

  buttonView: {

    marginTop: wp('7%'),

    marginBottom: wp('3%')

  },

  safeView: {

    flex: 1,

    backgroundColor: '#fff',

  },

  filterSelector: {

    width: 100,

    height: 100,

    margin: 5,

  },

  filterTitle: {

    marginTop: 70,

    fontSize: 12,

    textAlign: 'center',

  },

  container: {

    flex: 1,

    justifyContent: 'center',

    backgroundColor: '#FFFFFF',

    alignItems: 'center',

  },

});

export default FilterScreen;

輸出

完成上述代碼之后，如圖3所示，應(yīng)用程序的所有過(guò)濾器都是可見(jiàn)的了，用戶可以選擇任意一個(gè)濾鏡對(duì)圖片進(jìn)行處理了。

圖 3：圖片過(guò)濾器應(yīng)用

第4步：圖像保存和下載

完成上述功能之后，接著就需要編寫(xiě)保存/下載圖片的功能，否則應(yīng)用是玩不轉(zhuǎn)的。由于我們?cè)谏弦徊竭^(guò)濾器的基礎(chǔ)上添加下載功能的代碼。

和前面兩個(gè)步驟一樣，創(chuàng)建一個(gè)名為自定義圖片。

import React, { useState, useEffect } from 'react';

import {

  View,

  StyleSheet,

  Image,

  Platform,

  PermissionsAndroid

} from 'react-native';

import { CameraRoll } from "@react-native-camera-roll/camera-roll";

import {

  widthPercentageToDP as wp,

  heightPercentageToDP as hp,

} from 'react-native-responsive-screen';

import Constants from '../../Constants/Constants';

import Button from '../../Components/Button';



const ViewImage = ({ route }) => {

  const [thumbnail, setThumbnail] = useState({});

  const [photos, setPhotos] = useState('');



  useEffect(() => {

    getImageFromNavigation()

  })



  const getImageFromNavigation = () => {

    if (route?.params?.imageString) {

      console.log('params-->', route?.params?.imageString);

      setThumbnail(route?.params?.imageString)

      setPhotos(route?.params?.imageString)

    }

  }

  async function hasAndroidPermission() {

    const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;



    const hasPermission = await PermissionsAndroid.check(permission);

    if (hasPermission) {

      return true;

    }



    const status = await PermissionsAndroid.request(permission);

    return status === 'granted';

  }



  async function savePicture() {

    if (Platform.OS === "android" && !(await hasAndroidPermission())) {

      return;

    }

    CameraRoll.save(photos, { type: 'photo' })

  };

  return (

    <View style={styles.container}>

      <Image

        source={{ uri: photos !== '' ? photos : thumbnail?.path }}

        style={styles.imgView}

      />

      <View style={styles.buttonView}>

        <Button

          title={Constants.image_download}

          onclick={savePicture}

          style={{ textTransform: 'uppercase' }}

        />

      </View>

    </View>

  );

};



const styles = StyleSheet.create({

  imgView: {

    width: wp('100%'),

    height: hp('30%'),

    resizeMode: 'contain'

  },

  container: {

    flex: 1,

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

    paddingTop: 30,

    marginVertical: hp('25%')

  },

  buttonView: {

    marginTop: wp('7%'),

    marginBottom: wp('3%'),

    width: wp('80%'),

  },

});



export default ViewImage;

輸出結(jié)果如圖4 所示。

圖4：圖片下載

總結(jié)

根據(jù)上述指南，你已經(jīng)完成了代碼的編寫(xiě)。這里對(duì)整個(gè)指南稍做總結(jié)，在保證React Native安裝和配置的前提下，分別安裝圖像裁剪、圖像過(guò)濾和圖片下載的相關(guān)庫(kù)。然后，根據(jù)四步實(shí)現(xiàn)濾鏡功能的開(kāi)發(fā)，包括：調(diào)用手機(jī)相冊(cè)、圖像裁剪和調(diào)整圖片大小、創(chuàng)建圖像過(guò)濾器以及保存和下載圖像。

譯者介紹

崔皓，51CTO社區(qū)編輯，資深架構(gòu)師，擁有18年的軟件開(kāi)發(fā)和架構(gòu)經(jīng)驗(yàn)，10年分布式架構(gòu)經(jīng)驗(yàn)。

原文標(biāo)題：??A Guide to Implement Instagram-Like Filters in React Native??，作者：Kiran Beladiya


責(zé)任編輯：華軒 來(lái)源： 51CTO
Instagram濾鏡圖片編輯
相關(guān)推薦

2022-07-28 14:33:32

webviewweb頁(yè)面

2023-01-01 23:42:22

React框架暗黑模式

2017-06-20 12:48:55

React Nativ自定義模塊Note.js

2010-09-07 14:53:45

Chroma屬性CSS

2021-04-09 18:01:03

前端ReactDOM

2022-07-15 09:01:15

React對(duì)象編程

2021-02-26 15:10:00

前端React組件交互

2010-03-18 14:16:52

Java Thread

2022-11-15 18:31:37

React

2024-02-20 01:53:01

ReactFlutter開(kāi)發(fā)

2017-01-04 10:18:00

React NativScrollViewAndroid

2016-08-11 16:48:10

ReactjQueryJavaScript

2021-05-23 15:46:23

React代碼前端

2016-11-23 16:48:20

react-nativandroidjavascript

2016-10-13 19:01:59

React NativUbuntu

2016-08-31 17:03:20

JavascriptReact NativWeb

2020-10-21 08:38:47

React源碼

2014-05-30 09:44:08

Android折紙動(dòng)畫(huà)

2024-11-12 08:00:00

LSM樹(shù)GolangMemTable

2025-02-05 10:02:03

Locust測(cè)試異常處理
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)

国产福利精品一区二区| 青青草原综合久久大伊人精品 | 亚洲成人黄色网址| aaaaaa亚洲| 国产网友自拍视频导航网站在线观看| 成人中文字幕合集| 国产精品高潮呻吟久久av无限| 免费国产羞羞网站美图| 欧美日韩直播| 91精品中文字幕一区二区三区 | 美日韩一级片在线观看| 欧美日韩福利在线观看| 不卡一区二区在线观看| 日本精品在线观看| 欧美在线不卡一区| 蜜桃传媒一区二区三区| 在线免费观看黄| 91免费视频大全| 91丨九色丨国产在线| 国产精品久久久久久久久久久久久久久久久 | 亚洲精品美女在线观看| 国产乱女淫av麻豆国产| 原纱央莉成人av片| 一区二区三区在线视频播放| 亚洲欧美日韩精品在线| 污污网站免费在线观看| 国产美女精品一区二区三区| 国产精品99久久久久久久久| 久久精品视频6| 91日韩视频| 一个人www欧美| 97人妻精品一区二区三区免 | 精品欧美一区二区三区久久久| 91成年人视频| 麻豆成人久久精品二区三区红| 538国产精品一区二区免费视频| 欧美片一区二区| 欧美.日韩.国产.一区.二区| www.欧美三级电影.com| 免费网站在线高清观看| 免费欧美激情| 国产网站欧美日韩免费精品在线观看| 人妻少妇偷人精品久久久任期| 国产极品一区| 在线观看免费一区| av免费网站观看| 色在线视频观看| 亚洲成人www| 国产爆乳无码一区二区麻豆| 在线观看小视频| 亚洲精品自拍动漫在线| 特级毛片在线免费观看| 好吊日视频在线观看| 国产精品女人毛片| 在线观看日韩羞羞视频| 日本在线www| 亚洲男人电影天堂| 日本老太婆做爰视频| 成人午夜在线影视| 一区二区视频在线| 亚洲精品天堂成人片av在线播放| 在线观看中文字幕的网站| 亚洲精品欧美在线| 日韩精品在线视频免费观看| 成人在线免费观看黄色| 精品成人av一区| 一本久道综合色婷婷五月| 另类中文字幕国产精品| 欧美日韩一区高清| 欧美视频亚洲图片| 中文在线免费一区三区| 日韩电影网在线| 一区二区三区伦理片| 久久视频在线| 欧美华人在线视频| 亚洲免费在线视频观看| 秋霞电影网一区二区| 成人在线一区二区| 欧美视频在线观看一区二区三区| 91久色porny| 亚洲激情一区二区| 午夜小视频在线观看| 午夜精品久久久久久久| 免费大片在线观看| 91丨精品丨国产| 亚洲电影在线观看| 91导航在线观看| 欧美久久一级| 91精品国产高清| 中文字幕人成人乱码亚洲电影| 国产一区高清在线| 激情五月综合色婷婷一区二区| 欧美成人片在线| 亚洲伦理在线精品| 老头吃奶性行交视频| 亚洲2区在线| 国产亚洲一级高清| 精品少妇久久久| 免费人成精品欧美精品| 国产精品手机视频| av在线二区| 亚洲1区2区3区4区| 亚洲一区日韩精品| 婷婷综合成人| 久久影院资源网| 免费在线观看av的网站| 成人福利在线看| 亚洲一区二区精品在线| 日韩精品av| 日韩欧美成人午夜| 亚洲女人毛茸茸高潮| 亚洲精品一级| 亚洲自拍偷拍在线| 91在线不卡| 日韩欧美国产视频| 2018国产精品| 亚洲乱码免费伦视频| 国产成人精品久久亚洲高清不卡| 好吊色一区二区| 亚洲柠檬福利资源导航| 日本特黄a级片| 亚洲日产av中文字幕| 久久久久久香蕉网| 国产男男gay网站| 国产精品伦理一区二区| 好男人www社区| 日韩精品亚洲aⅴ在线影院| 欧美高清视频在线| 99产精品成人啪免费网站| 日本一二三四高清不卡| 欧美精品第三页| 美腿丝袜亚洲图片| 国语自产精品视频在线看抢先版图片| 国产精品玖玖玖| 亚洲欧美综合色| 日韩肉感妇bbwbbwbbw| 国产伦精品一区二区三区千人斩| 69av成年福利视频| 污污网站在线免费观看| 亚洲不卡一区二区三区| 岛国精品一区二区三区| 午夜欧美精品| 国产精品日韩一区二区三区| 丰乳肥臀在线| 亚洲第一网中文字幕| 国产亚洲精品av| 丁香六月久久综合狠狠色| 青青草综合在线| 色悠久久久久综合先锋影音下载| 久久夜精品va视频免费观看| 91亚洲国产成人精品一区| 国产精品麻豆久久久| 性欧美在线视频| 91精品综合| 91精品国产综合久久久久久丝袜| 国产区在线看| 精品福利一区二区三区免费视频| 免费在线看黄网址| av在线不卡网| 国产男女激情视频| 97精品一区| 成人黄视频免费| 这里有精品可以观看| 亚洲三级黄色在线观看| 91在线公开视频| 亚洲精品第一国产综合野| 激情综合激情五月| 日韩天天综合| 亚洲va韩国va欧美va精四季| 亚洲日日夜夜| 欧美激情亚洲国产| 精品三级久久久久久久电影聊斋| 欧美视频自拍偷拍| 少妇aaaaa| 91在线视频网址| 久久久久久久片| 欧美黄色aaaa| 欧美精品免费观看二区| 日韩第二十一页| 久久久久久久久久久国产| 国产小视频免费在线网址| 制服丝袜亚洲精品中文字幕| 久久午夜无码鲁丝片午夜精品| 久久综合五月天婷婷伊人| 最新中文字幕2018| 狠狠久久婷婷| 日韩欧美电影一区二区| 欧美2区3区4区| 国产不卡视频在线| 羞羞的视频在线观看| 亚洲精品天天看| 国产精品免费无遮挡| 精品动漫一区二区三区| 调教驯服丰满美艳麻麻在线视频| 国产成人av电影在线观看| 国产精品亚洲a| 欧美日韩1080p| 日韩成人av电影在线| 97精品久久| 国产欧美精品va在线观看| 成人性生交大片免费看网站| 综合av色偷偷网| 天天干天天草天天射| 欧美日韩国产一区| 麻豆精品久久久久久久99蜜桃| 亚洲精品乱码久久久久久久久 | 免费精品国产| 国产精品永久入口久久久| 欧美一级免费| 国产精品v片在线观看不卡| 日本片在线观看| 久久韩国免费视频| jizz视频在线观看| 精品一区二区亚洲| 好男人在线视频www| 51午夜精品国产| 中文字幕乱码在线观看| 精品欧美aⅴ在线网站| 欧美日韩精品一区二区三区视频播放 | 亚洲a v网站| 成人激情av网| 无码人妻一区二区三区精品视频| 久久精品国产免费看久久精品| 免费黄色特级片| 99热在线精品观看| 免费毛片网站在线观看| 欧美日韩mv| 成人免费看片视频在线观看| 欧美一级精品片在线看| 日韩精品伦理第一区| 久久精品亚洲成在人线av网址| 91网站在线看| 日韩福利影视| 国产精品三级久久久久久电影| 成人美女大片| 欧洲日本亚洲国产区| av岛国在线| 久久久久久97| 在线视频观看国产| 久久6免费高清热精品| 在线黄色网页| 欧美激情18p| av中文在线资源库| 91tv亚洲精品香蕉国产一区7ujn| 9lporm自拍视频区在线| 久久久免费电影| 2021中文字幕在线| 性欧美视频videos6一9| free性欧美| 5278欧美一区二区三区| 电影亚洲精品噜噜在线观看| 国产精品v片在线观看不卡| 欧美xxxx性| 川上优av一区二区线观看| 国产精品视频一区二区三区综合| 亚洲一区中文字幕在线观看| 哺乳挤奶一区二区三区免费看| 国产精品一区二区欧美| 日韩伦理一区二区三区| 四虎影院一区二区三区| 99久久视频| www.男人天堂网| 亚洲精选91| 色诱视频在线观看| 久久爱www久久做| 男生和女生一起差差差视频| 国产91精品久久久久久久网曝门| 午夜不卡久久精品无码免费| 成人18视频日本| 干b视频在线观看| ...中文天堂在线一区| 久久精品免费在线| 日韩欧美在线视频| 中文字幕免费视频观看| 欧美一区二区三区日韩| 免费看黄色一级视频| 亚洲欧洲日韩国产| 免费高清在线观看| 韩国精品久久久999| 成人开心激情| 91视频国产精品| 日韩动漫一区| 欧美亚州在线观看| 国产精品久久久久久麻豆一区软件 | 亚洲精品欧洲| 成人亚洲精品777777大片| 国产精品一区二区三区乱码 | 人妻丰满熟妇av无码区hd| 亚洲欧美日韩一区二区在线| 国产成人l区| 日本三级韩国三级久久| 欧美大片91| 色综合久久88色综合天天提莫| 这里只有精品在线| 国产精品无码av无码| 国产传媒日韩欧美成人| 熟女少妇内射日韩亚洲| 亚洲午夜精品在线| 亚洲无码久久久久| 日韩久久精品成人| 国产日产一区二区| 国产精品va在线| 理论片一区二区在线| youjizz.com亚洲| 爽好多水快深点欧美视频| 四虎精品一区二区| 日韩理论片在线| 尤物视频免费观看| 亚洲国产99精品国自产| 99久久精品免费观看国产| 国产精品免费视频xxxx| 五月综合久久| 精品久久久久久无码中文野结衣| 国产在线观看一区二区| 公肉吊粗大爽色翁浪妇视频| 亚洲成人7777| 99久久精品国产一区色| 中文字幕在线日韩 | 国产精品视频一区二区三区经| 97精品国产| 国产成人黄色网址| 久久精品夜色噜噜亚洲aⅴ| xxxxxx国产| 日韩精品一区二区三区四区视频| 色欧美激情视频在线| 国产精品福利小视频| 亚洲自拍电影| 日韩欧美国产综合在线| 国产ts人妖一区二区| av成人免费网站| 在线不卡a资源高清| av黄色在线观看| 国产精品色悠悠| 欧美精品一二| 网站一区二区三区| 中文字幕精品一区二区三区精品| 久久久精品毛片| 一区二区三区四区精品| 人人鲁人人莫人人爱精品| 日本不卡在线观看| 日韩av成人高清| 卡一卡二卡三在线观看| 欧美影院一区二区三区| 91短视频版在线观看www免费| 国产精品视频久久久久| 日本不卡二三区| 欧美视频亚洲图片| 一区二区久久久久| 亚洲精品一区二区三区四区 | 精品裸体bbb| 水蜜桃一区二区| 精品亚洲欧美一区| 国产探花在线播放| 日韩视频免费观看高清完整版在线观看 | 国产精品白丝一区二区三区| 欧美精品卡一卡二| 91在线观看污| 一级片在线免费播放| xxav国产精品美女主播| 精品久久国产一区| 久草热视频在线观看| 久久精品视频网| 一级全黄少妇性色生活片| 欧美精品在线视频观看| 激情视频极品美女日韩| 中文字幕乱码人妻综合二区三区| 久久久久久久综合狠狠综合| 亚洲一区中文字幕在线| 欧美精品一区三区| 亚洲第一福利社区| 污污网站在线观看视频| 亚洲欧美另类图片小说| 亚洲美女综合网| 国产精品69久久久久| 久久久久免费av| 久久久久久久无码| 色88888久久久久久影院按摩 | 一区二区三区加勒比av| 亚洲区小说区图片区| 国产精品影片在线观看| 欧美三级乱码| 亚洲高潮女人毛茸茸| 欧美成人激情免费网| 欧美gay视频| 国产精品无码免费专区午夜| 国产无一区二区| 精品久久久中文字幕人妻| 欧美最猛性xxxxx(亚洲精品)| 99久久.com| 一级做a爰片毛片| 51午夜精品国产| 日产精品一区| 91.com在线| 国产精品高清亚洲| 天天干视频在线| 99re在线视频上| 免费久久99精品国产| 国产成人精品片| 欧美理论电影在线观看| 色综合久久一区二区三区|