原创 15038098692 随笔随笔 40 阅读昨天 13:27:05
网络图片还没有(不在同一服务器下的图片), 还没有找到合适的解决方法
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 点击按钮下载图片 4</title>
- </head>
- <body>
- <div id="h5qrcode">
- <!-- 本地图片 -->
- <img id="h5qrcodeimg" src="img/1.jpg">
- </div>
- <a href=""class="btn btn-default"id="down_qrcode"download=" 二维码扫码签到 ">下载二维码</a>
- <script src="https://cdn.bootCSS.com/jquery/1.10.2/jquery.min.js"></script>
- <script>
- /* var imgSrc = "img/1.jpg";*/
- function getBase64Image(img) {
- console.log("执行了么 1")
- 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 main() {
- console.log("执行了么 2")
- var img = document.createElement('img');
- img.src =$("#h5qrcodeimg").attr('src');// 赋予二维码 src
- img.onload =function() {
- console.log("执行了么 3")
- var data = getBase64Image(img); // 调用转换函数, 转换成 base64 的格式
- console.log(data);
- $("#down_qrcode").attr("href",data);// 转码后赋予下载按钮 (a 标签) 的 href
- };
- }
- $(function () {
- main();// 选择需要的时候触发执行函数
- });
- </script>
- </body>
- </html>
- html
来源: http://www.qdfuns.com/article/39070/3ffcd5159d790d2d81ce31a4636a9e67.html