Tag Picture

  • Home   /  
  • Posts tagged "Picture"

How To Set Up Kuaiba Game Box How To Set Up Kuaiba Game Box

Leave a comment , , , ,

Before using Kuaiba Game Box to download games, we can set the game save path, download speed and other parameters to ensure that we can better download the game. So how to set up the download of Kuaiba Game Box? Below, the editor of Qidian will bring you the download and setup methods of Kuaiba Game Box. I hope it will be helpful to you.

How to set up the Kuaiba Game Box download? How to set up the Kuaiba Game Box download?

Kuaiba Game Box Download v7.6.1.8258 Official Free Version 12.4M Simplified Chinese

Check

Change download and cache download directories

1. Click the "Main Menu" button in the upper right corner of the Kuaiba game to slide out the drop-down menu, and click "Configuration Center", as shown in Figure 1

2. After clicking, the "Configuration Center" window will pop up. Click "Download Settings" and you can see the default game download cache directory and game installation directory, as shown in Figure 2

3. The steps for changing the download and cache download directories are the same. Let’s take modifying the “Download Cache Directory” as an example. Click “Browse” after the download cache directory, as shown in Figure 3.

4. After clicking, the "Browse for Folder" window will pop up. You can select the storage disk such as "Local Disk F", and then click "OK" to browse the folder, as shown in Figure 4

5. The download cache directory has been changed, click "OK", as shown in Figure 5

Kuaiba game box download speed settings

1. Click the "Main Menu" button in the upper right corner of the Kuaiba game to slide out the drop-down menu, and click "Configuration Center", as shown in Figure 1

2. After clicking, the "Configuration Center" window will pop up. Click "Download Settings" and you can see that the "Speed ​​Limit Setting" is closed, as shown in Figure 2

3. Check "Speed ​​Limit", modify the number in the settings, click OK, and the speed limit setting is successful (Note: The larger the number, the more it will affect your Internet access, and the smaller the number will not affect your Internet access.), as shown in Figure 3

Dear friends, after reading the download and setup method of Kuaiba Game Box, you should be able to set it up yourself now, right? Some settings still need to be manipulated, so go ahead and adjust them.

"Guli Guli": A Cartoon That Can Teach Babies To Talk

Leave a comment , , , ,

Some parents do too much, depriving their babies of the opportunity to speak. For example, if the baby wants to drink water, and just as he is about to ask for it, the parents with quick eyesight and quick hands have already handed over the water glass. Over time, the baby will develop an inert mentality and be unwilling to speak anymore. Under normal circumstances, parents' habit of arranging everything cannot be changed overnight. At this time, parents may wish to choose a cartoon for their baby that can teach the baby to speak, and let the baby learn to speak along with the cartoon characters. The cartoon "Guli Guli" is a cartoon that can teach babies to talk.

1. Bright colors and clear picture quality

Babies in the language learning stage are generally under 2 years old. It is suitable to choose some colorful and bright cartoons. Babies are generally not interested in blockbusters that use too many special effects and dark images. In addition, too many stunts may be harmful to the baby's eyesight.

The cartoon "Guli Guli" is not only brightly colored and has strong tonal contrast. It also provides an educational condition that combines language and pictures for the expansion of baby's vocabulary. Especially for those new words with complex and abstract meanings, cartoons often express the meaning of the words through specific situations, which is beneficial to the baby's understanding and memory of vocabulary, and the effect is often better than the educational method of using language to answer the language.

The "Guli Guli" cartoon will show the baby various forms of language as the plot develops: laughter when happy, cheers when winning… The most important thing is "Guli Guli" The animated narration of "Power" mostly uses onomatopoeia and overlapping words, which is very suitable for babies who are learning to talk, such as "dong dong dong", "red", etc.; in addition, the language style of the Five Guli is also in line with this stage. The babies' vocal habits are similar.

2. The characters are cute and full of childishness

Good animated characters all have one thing in common: cute, interesting, and people can't help but love them. However, some current cartoons (especially Japanese cartoons) have taken a "sexy" route in character modeling, and even animated characters will appear "half-naked" or "fully nude". Parents should be careful about movies like this and don't let their children receive such "early education" too early.

The protagonists of the "Guli Guli" animation are five cute little Guli (yellow Guli, blue Guli, red Guli, green Guli, pink Guli), who live on a mysterious island. There are many interesting stories about them. Among them, Lu Guli is the youngest, only 2 years old. In "The Five Flavors of Guli Guli", Lu Guli will take the children to taste the sour, sweet, bitter, spicy and salty flavors, and let the children express their feelings of tasting, and gradually guide the babies to open their mouths and speak. .

3. The story structure is simple and the ideas are simple

Babies under 2 years old have imperfect brain and thinking development. Therefore, cartoons with complex story structures are not suitable for babies of this age group. However, some cartoons have more complex ideas, such as the duality of people, the paradox of things, the helplessness of worldly affairs, and the danger of human hearts… Even adults may not be able to understand it, let alone children? There are also some cartoons that have large sections. Love scenes are also detrimental to baby development. In fact, this is the reason why "Teletubbies" is so popular among children. Those cartoons that are a bit silly and silly for adults are indeed the most relevant and perfect in the world of babies.

The cartoon "Guli Guli" has a simple narrative structure. Each episode has a clear theme, allowing the baby to learn to speak along with the cartoon while watching it.

4. Zero violence

Most European and American animation film and television companies have clear audience age positioning for the cartoons they produce. If it is a cartoon specifically for babies, there will be strict regulations to ensure that there are no props, actions and scenes related to violence in the shot, such as: knives, guns, scenes of beating, killing and bleeding, etc. In China, there are currently no such detailed regulations, so it depends on the "fierce eyes" of parents to identify them.

The "Guli Guli" cartoon is a series of animations aimed at developing the behavior of babies aged 0-6. The narration is similar to the way mothers tell stories, and the way the five little Guli speak is similar to children's speech habits. The entire cartoon contains no violence or vulgar language and is completely based on the innocent world of babies.

How To Use Axios Post In Vue To Upload Avatars/pictures And Display Them On The Page In Real Time

Leave a comment , , , ,

How to use axios post in vue to upload avatars/pictures and display them on the page in real time

Update time: September 27, 2018 08:40:57 Author:

Today, the editor will share with you a method of using axios post in Vue to upload avatars/pictures and display them on the page in real time. It has a good reference value and I hope it will be helpful to everyone.Let’s follow the editor and take a look.

In front-end development, for a better user experience, when uploading an avatar, the image will be displayed on the page first and then click the save button to complete the successful upload of the image. The code part refers to other people's writing methods.

html code:

 

 

  
 

 

  

  
请上传图片

js code:

//实时显示该图片在页面
 great(){
  document.getElementById('saveImage').onchange = function () {
  var imgFile = this.files[0];
  var fr = new FileReader();
  fr.onload = function () {
  document.getElementById('portrait').src = fr.result;
  };
  fr.readAsDataURL(imgFile);
  }
 },

Description of the js code part: Because it is a function declared in the vue method, you also need to use this.great() in the method to mount the method.

js code for image upload part:

imageSubmit(){
  let x = document.getElementById('saveImage').files[0];
  console.log(x);
  let params = new FormData() ; //创建一个form对象
  params.append('file',x,x.name); //append 向form表单添加数据
  //添加请求头 通过form添加的图片和文件的格式必须是multipart/form-data
  let config = {
  headers:{'Content-Type':'multipart/form-data'}
  };
  this.$axios.post("/user/image",params,config)
  .then(function(res){
  console.log(res);
  this.imageSave = res.data.image;
  sessionStorage.setItem('headImg',this.imageSave); //将图片保存，并能够在其他地方加载显示
  router.go(0); //刷新页面，头像改变
  }.bind(this))
  .catch(function (error) {
  console.log(error);
  })
 }
 },

Final rendering:

Note: During the later development process, it was discovered that uploading images can be used when loading the page before uploading to the server.

var windowURL = window.URL || window.webkitURL;

The above method of using axios post to upload avatars/pictures and display them on the page in real time in Vue is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Mobile Image Previewer

Leave a comment , , , ,

Mobile image previewer component

Possible functions:

Gallery preview, pictures can have copywriting, you can slide the screen to preview all pictures, double-click to enlarge/restore, use two fingers to zoom in/out, and move the picture after zooming in; after clicking on the picture, under WeChat (requires access to SDK to add a secure domain name) Open the image previewer that comes with WeChat (similar to the effect when opening a picture in a public account article); open the image previewer that comes with Mobile QQ (the effect of clicking on a picture in an interest tribe article); on other platforms ( And domain names that are not connected to WeChat SDK) open the H5 previewer of the component, which also has an image previewer that is not inferior to WeChat Mobile QQ; how to use it

<script src="//ossweb-img.qq.com/images/js/mobile_gallery/ww_gallery.js"></script>

<script>
    var unitMyGallery = new TGI_MobileGallery({
        imgArr: document.querySelectorAll(".tuku1 img"),
        bigPicAttr: "big-img",
        closeWXsdk: 1,
        closeQQsdk: 1,
        hideInfo: 1,
        turnFun: function () {
            var n = unitMyGallery.pageX.para.nowPage;
            var info = document.querySelectorAll(".tuku1 img")[n].getAttribute("alt");
            $(".TMG_txt").html(info);
        }
    });
</script>

View demo

Component parameters

Value: 0

type of data:

Do you need to turn on the picture preview function that comes with WeChat? (After turning it on, previewing pictures under WeChat will be a full-screen preview)

Value: 0

type of data:

Do you need to turn on the picture preview function that comes with mobile QQ? (After turning it on, previewing the picture under mobile QQ will be a full-screen preview)

Value: all img within body

type of data:

Need to bind the "click to view larger image" function and handle ultra-wide image collection; the default is the img of the entire page;

Value: 0

type of data:

Whether to reconstruct the table so that it can be scrolled; the default is 0;

value:

type of data:

Click stream statistics; suffix comes with xxxxx…tap

Value: big-img

type of data:

Use it when the preview image is inconsistent with the large image, and the image address is inconsistent. Here is a collection of large images, and the input is the attribute name in the image, for example, then it is big-img;

Value: 0

type of data:

Whether the picture information is automatically displayed and hidden; it is a user experience point. The information under the picture will fade in and out within 3 seconds; if set to 1, it will always be displayed;

Value: Custom

type of data:

Do you need to switch left and right buttons? By default, the image preview function that comes with Mobile QQ and WeChat is automatically blocked. The built-in styles of the left and right buttons are: , , and after adding them, they are: ,

Value: 1

type of data:

Previewer mask transparency, value range is 0-1; it is only valid if the built-in image preview function of QQ and WeChat is blocked;

Value: #000

type of data:

Mask color; only masking the built-in picture preview function of QQ and WeChat is effective;

Value: random value

type of data:

If the container ID is not set, it will be randomly generated by default; used when multiple previewers appear on one page and need to be controlled;

Value: tap

type of data:

Click the thumbnail to trigger the preview form, such as click, tap, etc.; the default is tap;

Component methods

turnFun: function() {
    var n = unitMyGallery.pageX.para.nowPage;
    var info = document.querySelectorAll(".tuku1 img")[n].getAttribute("alt");
    $(".TMG_txt").html(info);
}

The function executed by swiping the screen (including the rebound situation if page turning is unsuccessful) will be invalid under the Mobile QQ WeChat platform if the image preview function that comes with Mobile QQ WeChat is not turned off.

After creating a new instance, if the instance is named, you can open the previewer by executing .(num) and locate the corresponding picture; the value range of num is 0 to img.-1;

Case presentation

Example address

Examples of information pages

This is a case for information pages. You can try opening them with QQ, WeChat and browser respectively. The functional points that can be implemented are as follows:

Instructions:

<script src="//ossweb-img.qq.com/images/js/mobile_gallery/ww_gallery.js"></script>

<script>
    var unitMyGallery = new TGI_MobileGallery({
        imgArr: document.querySelectorAll(".content img"),
        needRebuildTable: 1
    });
</script>

Cases triggered by other events

Example address

Add a new case. The triggering of the above cases must be based on the pictures in the page. Now add a demo that is triggered by other events; the functions that can be implemented are as follows:

Instructions:

var slidePicGallery = new TGI_MobileGallery({
    imgArr: document.querySelectorAll("#slidePic img"),
    bigPicAttr: "big-img",
    hideInfo: 1,
    hottag: "a20160518figma",
    btnClass: "btn_slide",
    wrapId: "_slide",
    opacity: ".3",
    coverColor: "blue"
});
$("body").bind("tap", function () {
    slidePicGallery.picTapEvent(0);
});