I have been thinking about how to write the story of pictures in front-end development. Enumerating by picture type is too messy, so I should start from coding.

The data format

The picture data format is composed of the picture header and the picture content. The picture header is the data that describes the picture information, such as the size and format of the picture. So you don’t have to wait until all the images are loaded to know the width and height. In addition, for the photos taken by digital cameras, there will be exIF information, including the model of the shooting equipment, the direction of the photo, the time of the image shooting, etc. So to get the direction of the photo and so on, you can use exif-js, refer to the documentation for details

The name of the instructions
EXIF.getData(img, callback) Get image data, compatible with browsers that do not support providing EXIF data to get metadata.
EXIF.getTag(img, tag) Gets some data of the image
EXIF.getAllTags(img) Gets all the data of the image, and the value is returned as an object
EXIF.pretty(img) Gets all the data of the image, and the value is returned as a string

Image format

The name of the instructions
gif Lossless compression format, the compression rate is generally about 50%, if the stored in a file in a number of image data read and displayed on the screen, can constitute a kind of the simplest animation. Transparent background images are supported. GIF is a good animation format, but it will have a white serrated edge. You can choose to change the background color in Photoshop and merge it with the background color of the H5 layer. Then recommend a Flash, video and other formats into GIF animationSmall tools
jpeg / jpg JPEG, known as the Joint Photographic Experts Group, is a standard for image compression. It is relatively small, opens faster, but the picture is not as sharp. Image files compressed using the JPEG standard are called “JPEG files”. These file extensions are JPG, JPEG, JPE, JFIF, and JIF. Among these file formats, JPG is the most widely used. JPEG in compressed image color space conversion, refers to RGB conversion to YCbCr. Compression related, can refer toThe document
png Portable network graphics is a lossless compression bit-image format, which has three formats: 8-bit, 24-bit and 32-bit. 8-bit PNG supports two different transparent formats (index transparency and alpha transparency), while 24-bit PNG does not support transparency. 32-bit PNG adds 8-bit transparent channels on the basis of 24-bit. Thus, 256 levels of transparency can be displayed. The PNG specification does not contain a standard for embedded EXIF (Exchangeable Image File Format) image data
apng PNG is a bitmap animation format based on Portable Network Graphics (PNG). PNG decoders that do not recognize THE APNG format can play back at least the first normal PNG image. Support ios 8, not Android
webp An image format developed by Google to speed up image loading. Image compression volume is only about 2/3 of JPEG, and can save a lot of server broadband resources and data space. WebP supports both lossy and lossless compression. Encoding a WebP file of the same quality requires more computing resources than encoding a JPEG file. Android 4.0+, IOS not supported

Image rendering

There are two ways to render images, one is top-down rendering, one is progressive rendering, the difference is the continuous option checked in Photoshop when saving. If it is continuous, it is progressive rendering, an effect similar to fading, otherwise it is top-down rendering, a process in which the image spreads out the page.

Get picture data

  • Canvas to get

     cxt.getImageData
Copy the code