js 图片转base64 不念不忘少年蓝@ 2022-12-27 11:10 173阅读 0赞 function getImgSrc(id) { return $('#' + id).attr("src"); } /** *scr 为图片的路径 */ function getImgBase64(scr){ var img = new Image(); img.src=scr; var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var dataURL = canvas.toDataURL("image/png"); return dataURL; } ## demo ## ### 目录结构: ### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTUzMDY5NQ_size_16_color_FFFFFF_t_70][] ### demo.html ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-3.1.1.min.js" > </script> <script src="../js/demo.js" > </script> </head> <body> <img id="img_id" style="height: 100px;" src="../img/a.png"> <hr/> <button style="width: 100px;background-color: aquamarine;" onclick="printImgCode()">测试</button> </body> </html> ### demo.js ### function getImgSrc(id) { return $('#' + id).attr("src"); } /** *scr 为图片的路径 */ function getImgBase64(scr){ var img = new Image(); img.src=scr; var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var dataURL = canvas.toDataURL("image/png"); return dataURL; } function printImgCode(){ var scr = getImgSrc("img_id"); var dataURL = getImgBase64(scr); alert(dataURL); } [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTUzMDY5NQ_size_16_color_FFFFFF_t_70]: /images/20221120/ce26947575ab4000aad66f466b6e39c1.png
还没有评论,来说两句吧...