js base64编码格式图片另存为下载-蒲公英云

js base64编码格式图片另存为下载

冷不防 2023-06-18 15:55 45阅读 0赞

<a id="tttt"></a>
<div style="text-align: center">
            <img id="ringoImage" src="你的base64" style="height: 100%">
        </div>
        <div style="width: 100%;text-align: center;margin-top: 10px;margin-left: 37.6%">
            <button type="button"  onclick="down()" class="layui-btn layui-btn-xs layui-btn-normal">下载</button>
        </div>
<script>
        /**
         * 根据图片生成画布
         */
        function convertImageToCanvas(image) {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext("2d").drawImage(image, 0, 0);
            return canvas;
        }
        /**
         * 下载图片
         */
        function down() {
            var sampleImage = document.getElementById("ringoImage"),
                canvas = convertImageToCanvas(sampleImage);
            url = canvas.toDataURL("image/png");//PNG格式
            //以下代码为下载此图片功能
            var triggerDownload = $("#tttt").attr("href", url).attr("download", uuid()+".png");
            triggerDownload[0].click();
//    triggerDownload.remove();
        }
        function uuid() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
            s[8] = s[13] = s[18] = s[23] = "-";
            var uuid = s.join("");
            return uuid;
        }
    </script>