图片的各种问题

努力向上长的小小草啊

于 2021-11-01 15:32:28 发布

阅读量396

点赞数

分类专栏：项目实战遇到的问题 web前端文章标签：缓存

本文链接：https://blog.youkuaiyun.com/qq_38412122/article/details/121081262

版权

项目实战遇到的问题同时被 2 个专栏收录

6 篇文章

订阅专栏

web前端

5 篇文章

订阅专栏

博客讨论了图片缓存的问题，当使用Img标签加载图片接口时，如何避免图片因缓存而不重新渲染。作者提出了在src中添加随机数参数来确保每次打开都能触发新的加载。此外，还简要介绍了图片的导出过程，需要指定图片路径和下载名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 图片缓存问题

Img标签src拼接的一个图片接口路径，每次点击打开时走缓存，不重新渲染，本来打算弹框关闭后执行强制刷新，但不符合实际应用，在弹框上添加key也无用；最后添加随机数，在src请求接口后添加一个参数调用Math.random()，每次打开弹窗，图片自动重新加载

2.导出图片

传参：图片路径和下载后的图片名字

/**
 * @param imgSrc 图片路径
 * @param imgName 下载图片名
 */
        Vue.prototype.downLoadImage = function (imgSrc,imgName =  'picture') {
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = imgName; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgSrc;
        }