Recently, I need to open the WeChat sharing method of the app to the webview, which involves the shared images. If you connect through the transfer of pictures, you will get the image file again in the background, which will affect the speed. I chose webview to pass the image to the local application in base64-bit encoding. Here is the implementation reference code:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Image to Base64 - jsFiddle demo by handtrix</title> <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css" rel="external nofollow" > <style type='text/css'> @import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); body{ padding: 20px; } </style> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ /** * convertImgToBase64 * @param {String} url * @param {Function} callback * @param {String} [outputFormat='image/png'] * @author HaNdTriX * @example convertImgToBase64('http://goo.gl/AOxHAL', function(base64Img){ console.log('IMAGE:',base64Img); }) */ function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var img = new Image; img.crossOrigin = 'Anonymous'; img.onload = function(){ canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img,0,0); var dataURL = canvas.toDataURL(outputFormat || 'image/png'); callback.call(this, dataURL); // Clean up canvas = null; }; img.src = url; } $('#img2b64').submit(function(event){ var imageUrl = $(this).find('input[name=url]').val(); console.log('imageUrl', imageUrl); convertImgToBase64(imageUrl, function(base64Img){ $('.output') .find('textarea') .val(base64Img) .end() .find('a') .attr('href', base64Img) .text(base64Img) .end() .find('img') .attr('src', base64Img); }); event.preventDefault(); }); });//]]> </script> </head> <body> <h2>Input</h2> <form id="img2b64"> <input type="url" name="url" placeholder="Insert an IMAGE-URL" value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" required> <span> <input type="submit"> </span> </form> <hr> <h2>Output</h2> <div> <textarea></textarea><br> <a></a><br><br> <img><br> </div> </body> </html>PS: Here is a tool for online image conversion base64 encoding for your reference:
Image conversion to Base64 encoding online tool : http://tools.VeVB.COM/transcoding/img2base64