JS-点击图片下载到本地-蒲公英云

JS-点击图片下载到本地

小鱼儿 2022-04-10 02:16 441阅读 0赞

先使用canvas显示图片，接着使用toDataURL()方法获取图片展示的 data URI，通过在a链接设置download属于，点击将图片内容下载到本地。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <button onclick="download()">点击下载</button>
    </body>
    <script>
        function download() {
            var image = new Image();
            image.crossOrigin = "anonymous";
            image.src = "http://is3.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
            var fileName = image.src.split(/(\\|\/)/g).pop();
            image.onload = function () {
                var canvas = document.createElement('canvas');
                canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
                canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
                canvas.getContext('2d').drawImage(this, 0, 0);
                var blob;
                // ... get as Data URI
                if (image.src.indexOf(".jpg") > -1) {
                blob = canvas.toDataURL("image/jpeg");
                } else if (image.src.indexOf(".png") > -1) {
                blob = canvas.toDataURL("image/png");
                } else if (image.src.indexOf(".gif") > -1) {
                blob = canvas.toDataURL("image/gif");
                } else {
                blob = canvas.toDataURL("image/png");
                }
                $("body").html("<b>点击下载图片.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
            };
        }
    </script>
</html>