js前端 base64图片下载保存

柔情只为你懂 2022-10-03 01:52 480阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BrNjk0MDQ2MjIw_size_16_color_FFFFFF_t_70][]

如图，我想通过点击“保存按钮”，将这张base64图片保存到本地。

// 保存按钮点击事件方法
    function saveImg(){
                var sampleImage = $("img")[0]; // 找到图片所在的img标签
                var canvas = convertImageToCanvas(sampleImage); //创建画板
                url = canvas.toDataURL("image/png"); //生成下载的url
                var triggerDownload = $("#saveImg").attr("href", url).attr("download", "ewm.png"); // 把url放到我们的a标签中，并得到a标签对象
                triggerDownload[0].click(); //模拟点击一下a标签，即可下载啦！
        }
    
        /**
         * 根据图片生成画布
         */
        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;
        }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BrNjk0MDQ2MjIw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BrNjk0MDQ2MjIw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190807192827270.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BrNjk0MDQ2MjIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BrNjk0MDQ2MjIw_size_16_color_FFFFFF_t_70 1]: /images/20220123/8406f88d782444589bffcff2d1ab493b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，480人围观）

还没有评论，来说两句吧...

相关阅读

相关 base64图片文件保存及读取

/** * <保存图片文件> * * @param imgPath 图片存储路径 * ...

港控/mmm°/ 2024年04月20日 09:22/ 0 赞/ 102 阅读

相关 MVC将Base64 保存为图片

前台传来Base64字符串。本来可以直接保存数据库返回给图片但是这样对数据库负担太重传输也费时间。一搬都是存个地址在数据库 public ActionResult

超、凢脫俗/ 2023年10月11日 13:12/ 0 赞/ 76 阅读

相关 js将base64图片保存本地

js将后端传输来的base64编码图片解析，并保存本地下面就是代码部分： <html> <head> <meta http-equiv="Cont

我不是女神ヾ/ 2023年10月02日 11:26/ 0 赞/ 67 阅读

相关 js 图片转base64

function getImgSrc(id) { return $('' + id).attr("src");

不念不忘少年蓝@/ 2022年12月27日 11:10/ 0 赞/ 261 阅读

相关 js前端 base64图片下载保存

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BrNjk0

柔情只为你懂/ 2022年10月03日 01:52/ 0 赞/ 481 阅读

相关将url路径图片保存为base64 和把base64图片保存在本地

> 需求： > > 1. 将url路径图片保存为base64 > > 2. 把base64图片保存在本地案例：图片url路径：[https://img-blog

男娘i/ 2022年09月16日 11:09/ 0 赞/ 268 阅读

相关 base64转图片图片转base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

本是古典何须时尚/ 2022年06月17日 05:09/ 0 赞/ 496 阅读

相关 PHP保存Base64图片base64_decode的问题

[PHP保存Base64图片base64\_decode的问题][PHP_Base64_base64_decode] PHP对Base64的支持非常好，有内置的base6

深碍√TFBOYSˉ_/ 2022年05月28日 09:26/ 0 赞/ 229 阅读

相关 js传送图片Base64编码

> 起初打算将base64的编码放到input的value中，后台用String接收，结果后台一直取不到，看来是我想多了。虽然input的value是没有长度限制的，Strin

妖狐艹你老母/ 2022年05月20日 02:12/ 0 赞/ 267 阅读

相关前端图片在线转换Base64 图片编码Base64

首先讲一下什么是图片Base64编码：简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。为什么要用Base64？我们

比眉伴天荒/ 2021年09月14日 03:02/ 0 赞/ 1085 阅读