Modify the Canvas image resolution (DPI) using JavaScript)

Application Scenario: the Canvas can generate the JPG tag based on the product information read from the database. However, the default resolution (DPI) of the JPG image is 72, which is too low, as a result, the printed image will be blurred and the DPI will be modified. The general practice is to upload the image to the server application scenario: the tag needs to be printed for each delivery of the warehouse, canvas can generate the JPG tag based on the product information read from the database. However, the default resolution (DPI) of the JPG image is 72, which is too low, leading to blurred printed images. the general practice of modifying DPI is to upload the image to the server and use C # To modify DPI before downloading it to the server. However, I feel very frustrated that the image has been generated on the client, to modify a small tag (DPI information is only a header META in JPEG format), you need to upload a large image to the server. later, I used the following method to directly modify DPI with JavaScript. Here, I don't post the source code. I only provide a solution. I hope you can try it yourself. Since DPI is only the header information in JPEG format, and it is a small part, while base64 is a stream encoding, so canvas. in base64 strings after toDataURL (), the DPI information should be located in a fixed position. Two JPG images with the same content are generated using the image processing program (Fireworks is used, only change the DPI of the image. The DPI of the image a is 72, and that of the image B is 300. Here, we use UE to compare the two files for confirmation, it is true that only A few bytes in the header are different. Use C # To read A/B images and encode them into BASE64, generate a.txtand B .txt, and use UE or another text editor to compare the two text files to find different parts, you will find that only less than 10 characters close to the header are not the same and repeat the above experiment. Using different images, you will find that the fixed several characters are always different at last, and as long as the DPI is the same, the character at the fixed position is also the same as the canvas on the browser side. toDataURL generates the base64 character of the jpg image, and then modifies the character at the fixed position in the character to the 300 feature character of DPI during the test. Now you have obtained a jpg image with DPI 300. if you are interested, you can study the BASE64 encoding and create a function to calculate the feature characters corresponding to different DPI. As for those who are in the binary state, click the calculator and you will find that the DPI value is directly stored. MORE: in the company's projects, the operator will get used to storing images in a fixed folder every time in different batches, when the image generated by canvas is saved as the default file name, the default file name is always canvas.jpg. If you use the batch number .jpg as the default file name to save the image, there will be a lot of better experience. Here there are two solutions: go to Google to find a Flash component named downloadify, you can ensure that A dialog box is displayed when you click the "download" button, and the default file name can be added to the tag by using the download attribute of HTML5 specified by js. This solution is simpler, however, Firefox/Chrome will be directly saved to the default download location and won't be selected by the user. Right-click and save as will lose the default file name. The two methods have their own advantages and disadvantages. For details, refer to the user habits of the operator.