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

This article is about how vue converts image files to base64. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Convert an image file to base64

Go straight to the topic and go to the code (it is still practical or FileReader)

1. Image to Base64imageToBase64 (file) {var reader = new FileReader () reader.readAsDataURL (file) reader.onload = () = > {console.log ('file to base64 result:' + reader.result) this.iconBase64 = reader.result} reader.onerror = function (error) {console.log ('Error:', error)} 2, Base64 image is directly displayed on the tag

Vue network picture to base64 single picture to Base64 methods: {/ / asynchronously execute imageUrlToBase64 () {/ / must be set to let, otherwise the picture will not display let image = new Image () / / solve cross-domain problems image.setAttribute ('crossOrigin',' anonymous'); let imageUrl = "http://img1.imgtn.bdimg.com/it/u=4012470373,3540768040&fm=26&gp=0.jpg"; image.src = imageUrl let that = this / / image.onload is asynchronous loading image.onload = () = > {var canvas = document.createElement ("canvas"); canvas.width = image.width; canvas.height = image.height Var context = canvas.getContext ('2d'); context.drawImage (image, 0,0, image.width, image.height); var quality = 0.8 / / the dataurl here is the base64 type var dataURL = canvas.toDataURL ("image/jpeg", quality); / / use toDataUrl to convert the picture into jpeg format, and do not compress the picture into png, because the string of base64 after being compressed into png may be longer than that before conversion! },} multiple pictures are transferred to Base64 data () {return {base64Datas: [],} methods: {imageUrlToBase64 () {let data = ["https://cache.yisu.com/upload/information/20220209/112/953450.png", "https://cache.yisu.com/upload/information/20220209/112/953450.png"," https://cache.yisu.com/upload/information/20220209/112/953450.png"] this.imageUrlToBase64 (data, 1, data.length) }, / / Recursive synchronous execution of onloadImg (data, I, len) {/ / must be set to let, otherwise the picture will not display let image = new Image () / / solve cross-domain problems image.setAttribute ('crossOrigin',' anonymous'); let imageUrl = "https://cache.yisu.com/upload/information/20220209/112/953450.png"; image.src = imageUrl let that = this / / image.onload is asynchronous loading image.onload = () = > {var canvas = document.createElement ("canvas"); canvas.width = image.width; canvas.height = image.height Var context = canvas.getContext ('2d'); context.drawImage (image, 0,0, image.width, image.height); var quality = 0.8 / / the dataurl here is the base64 type var dataURL = canvas.toDataURL ("image/jpeg", quality); / / use toDataUrl to convert the picture into jpeg format, and do not compress the picture into png, because the string of base64 after being compressed into png may be longer than that before conversion! / / the array stores the picture base64 that.base64Datas.push (dataURL); / / Recursively executes the picture url to base64 I = I + 1; if (I)

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.