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

冷不防 2023-06-18 15:55 23阅读 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>