Use JavaScript to modify the resolution (DPI) of Canvas images

Application scenario:

The warehouse needs to print labels for each shipment. Canvas can generate label JPG based on the product information read from the database, but the default resolution (DPI) of this JPG image is 72

This DPI is too low, resulting in The printed image will be very blurry.

The normal way to modify the DPI is to upload the image to the server and use C# to modify the DPI and then download it to the server

But I feel aggrieved because the image has clearly been generated on the client, just In order to modify a small mark (DPI information is just a header META in JPEG format), I had to upload a large picture to the server.

Later I used the following method

Modify it directly with JavaScript DPI

The source code is not posted here, only solution ideas are provided. I hope friends who need it can try it themselves

Now that we know that DPI is only the header information of the JPEG format, and it is a very small part, and base64 is a stream encoding, Then in the base64 string after canvas.toDataURL(), the position of this DPI information should also be fixed

Use an image processing program (I use Fireworks) to generate two JPG images with the same content, only modify The DPI, the DPI of picture A is 72, and the DPI of picture B is 300

For confirmation, use UE to compare the two files. It is true that only the first few bytes are different

Use C# to read A/B Pictures are encoded into BASE64 respectively to generate A.txt and B.txt

Use UE or other text editors to compare the two text files and find the different parts. You will find that there are less than 10 characters near the head. It’s different

Repeat the above experiment and use different pictures, you will find that the fixed characters are always different in the end, and as long as the DPI is the same, the characters at the fixed position are also the same

Use canvas on the browser side .toDataURL generates the base64 characters of the jpg image, and then changes the character at the fixed position to the characteristic character with a DPI of 300 during the test

OK, now you have obtained a JPG image with a DPI of 300.

Friends who are interested can study BASE64 encoding, and then make a function to calculate the characteristic characters corresponding to different DPIs

As for the binary states, click on it with a calculator and you will find that it is direct storage DPI value

MORE:

In the company's projects, operators are used to saving different batches of images in a fixed folder. When the images generated by canvas are saved as, the default file name is It’s always canvas.jpg

The experience will be much better if they use the batch number.jpg they are used to as the default file name for saving

There are two solutions here,

Go to Google to find one called Downloadify's Flash component can ensure that when you click the "Download" button, a dialog box for selecting the save location will pop up, and the default file name can be specified with js

Use the HTML5 download attribute to add it to the A tag. This solution is simpler. However, Firefox/Chrome will save directly to the default download location without allowing the user to choose, and right-clicking Save As will lose the role of the default file name. Both options have their own pros and cons. It depends on the operator’s usage habits.