Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to achieve picture compression in HTML5 related knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have something to gain after reading this article on how to achieve picture compression in HTML5, let's take a look at it.

When we do ID card recognition in the project, we need to send the base64 format coding of the picture, but the photos taken by the mobile phone are too large, so it is terrible to convert them to base64, so we found a solution.

The knowledge points involved

The onchange event is triggered after the file has been uploaded

Use the files attribute to get the uploaded file object

ReadAsDataURL is used to convert to base64 encoding

Distinguish between canvas's canvas and painting environment:

Canvas: corresponding to the cvs in the code, you can set the canvas width,height

Painting environment: corresponding to the ctx in the code, you can set fillStyle,fillRect, etc.

Use the drawImage () method that comes with canvas to draw the picture on canvas.

If you want to get the compressed base64, you can use the toDataURL () method that comes with canvas.

Complete code

Document

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.