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

This article mainly introduces the JavaScript how to compress and encrypt pictures of the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, with a certain reference value, I believe that everyone after reading this JavaScript how to compress and encrypt the picture article will have a harvest, let's take a look.

First, compress the picture

Compression principle:

Read the picture into canvas, and use canvas's toDataURL method to make the picture Base64. In this process, you can set the quality value, that is, the picture quality value, which is between 0.1 and 1. The smaller the value, the higher the compression.

Complete code:

Compressed picture:

("# file") .change (function () {undefinedvar m_this = this;cutImageBase64);}) function cutImageBase64 {undefinedvar file = m_this.files [0]; var URL = window.URL | window.webkitURL;var blob = URL.createObjectURL (file); var base64;var img = new Image () img.src = blob;img.onload = function () {undefinedvar that = this / / the generation ratio var w = that.width,h = that.height,scale = w / scale;// w = wid | | w = h = w / scale;// generate canvasvar canvas = document.createElement ('canvas'); var ctx = canvas.getContext (' 2d'); $(canvas). Attr ({undefinedwidth: wdepartment height: h}); ctx.drawImage (that, 0,0, wMagneh); / / generate base64base64 = canvas.toDataURL ('image/jpeg', quality | | 0.9) Document.getElementById ("pic") .src=base64;document.getElementById ("sz") [xss_clean] = parseInt (base64.length/2014,0) + "kb";}

Running effect:

Compression ratio

As you can see in the image above, the size of the compressed image is 28KB, while the original file size is more than 400 KB:

It can be seen that the compression effect is still very good.

Second, encrypt pictures

The image compression mentioned above is a very practical technology, and then the focus of this article is to show a strange technique: image encryption.

The reason why we talk about compression compression and picture encryption is that image encryption is completed on the basis of the previous compression technology.

In the above code, toDataURL produces the base64 encoding of the picture.

The Base64 encoding must be complete and correct in order to display the picture properly.

Only a small change to the code, even if it is only one character, will make the picture unable to display properly.

Then, add a character to the coding position in the program to achieve the effect of destroying the correct encoding and thus achieving encryption:

Running effect, output encrypted base64 code:

Test it:

The effect is as follows, the picture cannot be displayed properly.

Then, the following effect will be achieved:

In the web page, use the src of img to introduce encrypted base64 characters, and the picture cannot be displayed at this time. Then, you can enter the password, and when the password is correct, decrypt the base64 characters to make the picture display properly.

Enter the password:

Correct password, decrypt and display the picture:

Source code:

Function jm () {undefinedvar pass = prompt ('Please enter password','); if (pass! = "1" + "2" + "3") {undefinedalert ("password error.") ;} else {undefinedvar base64_2 = document.getElementById ("txt"). Value.toString (); / decrypt var base64_3 = base64_2.substring (0meme 26) + base64_2.substring (27 Base64 length); document.getElementById ("pic"). Src=base64_3;document.getElementById ("bt"). Style.display = "none";}}

There are several other elements in the page:

Input is used to store the encrypted base64 code, which is the content generated and encrypted by the js code function above

Img is used to display the decrypted image; there is also a button that calls the decryption function when clicked.

Some people may have found that although the picture code is encrypted and password protection is added, as long as you look at the web source code, you can know the password, which does not have the effect of encryption at all.

So far, this problem does exist. So, take it one step further:

The password can be seen because the javascript code is transparent, so the decrypted js code is encrypted, and after encryption, the password will not be visible.

Obfuscate the JS code with JShaman:

And check "string encryption" in the configuration of JShaman:

The encrypted code will not find the previous password characters at all:

In this way, the complete picture encryption is realized: the picture encryption is stored in a separate html, which can be easily carried, stored and transmitted. The content is encrypted and the password is encrypted. Only those who know the password can see the picture.

This is the end of the article on "how to compress and encrypt pictures in JavaScript". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to compress and encrypt pictures in JavaScript". If you want to learn more, you are welcome to follow the industry information channel.

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.