js前端 base64图片下载保存

柔情只为你懂 2022-10-03 01:52 380阅读 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 条评论，380人围观）

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

相关阅读

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

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

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

相关 Base64转图片和图片转Base64

<template> <view> <view class="imgtext"> <im

爱被打了一巴掌/ 2023年01月13日 09:37/ 0 赞/ 250 阅读

相关 js 图片转base64

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BrNjk0

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

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

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

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

相关 base64转图片图片转base64

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

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

相关 base64生成图片——图片转换变成base64

base64生成图片——图片转换变成base64 如题。下面上货。 package com.xueyou.demo; import org

桃扇骨/ 2022年06月15日 05:22/ 0 赞/ 356 阅读

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

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

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

相关 js传送图片Base64编码

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

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

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

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

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