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

This article mainly introduces "how to compress pictures and make cards in html" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to compress pictures and make cards in html" article can help you solve the problem.

Use canvas to compress pictures

Use the write input tag in html, and when type is file, you can call up the phone's photo album to select photos, and you can also support the camera to take pictures. In this scenario, it is possible that the size of the image will be larger, which may exceed the maximum range supported by the backend, resulting in upload failure.

1. First of all, you need to get the picture file.

Var eleFile = document.querySelector ('# file'); var reader = new FileReader () eleFile.addEventListener ('change', function (event) {file = event.target.files [0]; console.log (file) / / the file selected is the picture if (file.type.indexOf ("image") = = 0) {reader.readAsDataURL (file);}})

two。 At this point, when you get the picture file, you have to understand the use of FileReader objects in js.

The FileReader object allows Web applications to asynchronously read the contents of files (or raw data buffers) stored on the user's computer.

Methods:

Method name parameter description abortnone interrupt reading readAsBinaryStringfile binary code readAsDataURLfile reads the file as DataURLreadAsTextfile, [encoding] reads the file as text

ReadAsText: this method has two parameters, the second of which is how the text is encoded, and the default value is UTF-8. This method is very easy to understand, the file is read as text, and the result is the contents of the text file.

ReadAsBinaryString: this method reads the file as a binary string, which we usually transfer to the back end, where the back end can store the file.

ReadAsDataURL: this is the method used in the example program, which reads the file into a string that begins with data:, which is essentially DataURL, and DataURL is a scheme for embedding small files directly into the document. The small files here usually refer to files in the format of images and html. (the way of base64 is obtained from this. )

Brief introduction to FileReader handling event

Event description onabort interrupt triggers onerroronabortonload file read successfully triggers onloadend read completion trigger, regardless of success or failure onloadstart read starts triggering onprogress read

Continue the above operation, after getting the picture, you need to process and convert the file, at this time

Var reader = new FileReader (); / / read the file into the page reader.readAsDataURL (file) as DataURL; reader.onload=function (e) {console.log (reader)}

Now that the picture has been taken and converted, it can be compressed now.

Var eleFile = document.querySelector ('# file'); var reader = new FileReader () eleFile.addEventListener ('change', function (event) {file = event.target.files [0]; / / console.log (file) / / the selected file is the picture if (file.type.indexOf ("image") = = 0) {var reader = new FileReader (); / / read the file into the page reader.readAsDataURL (file) as DataURL Reader.onload=function (e) {/ / console.log (this.result) var pre=document.getElementById ("pre") Pre.setAttribute ("src", this.result) canvasDataURL (this.result, 100,0.5)}}) / * [canvasDataURL is compressed through canvas] * @ base64 format of params path picture * @ params targetWidth compressed picture width * @ params quality picture quality quality value is smaller The more blurred the image drawn * / function canvasDataURL (path, targetWidth, quality) {var img = new Image () Img.src = path img.onload = function () {/ / var that = this / / console.log (that) / / default proportional compression var w = this.width var h = this.height scale = w / h; w = targetWidth h = targetWidth / scale var quality = quality / / the default image quality is canvas var canvas = document.createElement ('canvas'); var ctx = canvas.getContext (' 2d'); / / create attribute node var anw = document.createAttribute ("width"); anw.nodeValue = w; var anh = document.createAttribute ("height"); anh.nodeValue = h; canvas.setAttributeNode (anw) Canvas.setAttributeNode (anh); ctx.drawImage (this, 0,0, w, h); / / the smaller the quality value, the more blurred the image drawn var base64 = canvas.toDataURL ('image/jpeg', quality); var result=document.getElementById ("result"); result.setAttribute ("src", base64)}}

Very simple, so you can get the compressed picture, as can be seen from the above code, the principle is that the toDataURL method in canvas can specify the format and compression quality of the picture after compression, compress the canvas information and convert it to base64 coding to achieve compression.

Using canvas to make cards

Scene: combine the newly compressed picture with another picture, and you can press long to save it.

Function drawCanvas (target) {var canvas = document.querySelector ('# myCanvas') var ctx = canvas.getContext ('2d') / is the ratio of physical pixels on the device to device independent pixels (device-independent pixels (dips)) var dp = window.devicePixelRatio | | 1 var backingStoreRatio = ctx.webkitBackingStorePixelRatio | | ctx.mozBackingStorePixelRatio | ctx.msBackingStorePixelRatio | | ctx.oBackingStorePixelRatio | ctx.backingStorePixelRatio | | 1 var ratio = this.dp / this.backingStoreRatio var oldWidth = canvas.width | Var oldHeight = canvas.height canvas.width = oldWidth * ratio canvas.height = oldHeight * ratio canvas.style.width = oldWidth + 'px' canvas.style.height = oldHeight +' px' ctx.scale (ratio Ratio) var headerImg = new Image () var bgImg = new Image () headerImg.src = target bgImg.src ='.. / bg.png' headerImg.onload = (e) = > {/ / the aspect ratio of the picture var rate = headerImg.width / headerImg.height console.log (rate) bgImg.onload = (e) = > {ctx.drawImage (headerImg, 10,30,50) (50 / rate)) / / background image ctx.drawImage (bgImg, 0,0150150) ctx.fillText ('awesome', 80,70) var resultImg = new Image () resultImg.src = canvas.toDataURL ('image/png', 1) resultImg.style.width =' 100% 'var cardImg=document.getElementById ("cardImg") CardImg.setAttribute ("src", resultImg.src)}}

Get the picture you just got, draw it on the canvas when the image is loaded, you can also match it with text, and so on, and finally convert the information of canvas into base64 coding to achieve.

This is the end of the introduction to "how to compress pictures and make cards in html". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.