pd4d10 / console-importer

Easily import JS and CSS resources from Chrome console.
https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie
MIT License
848 stars 57 forks source link

provide a console-importer gif show #24

Open zhaoolee opened 6 months ago

zhaoolee commented 6 months ago

2023-12-28 18 58 57

$i('axios');
$i('crypto-js');

axios.get('https://placekitten.com/200/300', { responseType: 'arraybuffer' })
  .then((response) => {
    // Convert the ArrayBuffer to WordArray
    const wordArray = CryptoJS.lib.WordArray.create(response.data);
    // Convert the WordArray to a base64 string
    const base64String = CryptoJS.enc.Base64.stringify(wordArray);
    const imageUrl = `data:image/jpeg;base64,${base64String}`; // Assuming the image is a JPEG
    // Create a new image and assign the base64 string as the source
    const image = new Image();
    image.onload = function() {
      // Once the image is loaded, use its dimensions to set the console padding
      const style = [
        'font-size: 1px;',
        `padding: ${this.naturalHeight / 2}px ${this.naturalWidth / 2}px;`, // Divide by 2 because of the 1px font-size trick
        `background: url(${imageUrl}) no-repeat;`,
        'background-size: contain;'
      ].join(' ');
      console.log('%c ', style);
    };
    image.src = imageUrl;
  })
  .catch((error) => {
    console.error('Error fetching or encoding the image:', error);
  });

from https://github.com/zhaoolee/ChromeAppHeroes/blob/master/page/121-console-importer-2023-12-20.md