如何用js实现图片下载

如何用js实现图片下载？？？

需求场景：点击图标，实现图片下载。

html代码：
js函数：

downLoadImg(imgsrc, name) {var image = new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload = function() {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;var context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);var url = canvas.toDataURL("image/png",0.7); //得到图片的base64编码数据var a = document.createElement("a"); // 生成一个a元素var event = new MouseEvent("click"); // 创建一个单击事件a.download = name?name+'.png':"photo.png"; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = imgsrc;
},

坑：
这里是使用canvas生成base64码进行图片下载，因为直接使用a标签进行图片下载，会有一个跨域问题，图片域名需要和我们的网站域名保持一致，如果不一致的话，则无法下载成功。但是使用canvas生成base64码进行下载时，会有一个问题，当a标签的download属性过长（传入的name过长）会导致图片下载失败，所以我们需要需要写成a.download = name + “.png”，来告诉我们的浏览器所下载的是什么格式的文件。

如何用js实现图片下载相关推荐

JS将图片转化为base64编码，并实现点击下载，js实现图片下载的实操博客
背景需求在前端的工作中,经常碰到点击下载图片的需求,但是有一种情况大家经常碰到,就是点击下载地址之后,在浏览器窗口默认打开了,并没有调用浏览器进行下载如果你正在完善这个需求,一直解决不了,恭喜你看 ...
如何用js实现图片切换的同时，文字也同时切换
如何用js实现图片切换的同时,文字也同时切换? 图片切换的实现我会代码如下: <!doctype html> <html> <head> <meta cha ...
Node.js制作图片下载爬虫的一般步骤
图片下载爬虫分两部分:爬页面和下载图片. 爬页面时先看网址是https还是http的,然后选择不同的内置对象:其次看编码,如果是charset=gb2312的网页就需要iconv帮忙转码,好在大部分都 ...
html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
js实现图片下载（二维码）
今天遇到个二维码下载问题,下载下来的二维码扫描后失效,记录一下: 解决办法就是把src换成绝对路径图片下载(二维码) 方法一: function getImageDataURL(downloadNa ...
如何用js给图片重置宽_如何用js给老婆每天发情话
作者: 加百利真胖原文:https://juejin.cn/events/all 一.引言最近家里添了小孩,在家带娃陪产了一些天,深刻体会到老婆带孩子的辛苦. 工作的时候不能在家陪她,就想着写个程 ...
JS实现图片下载功能
download (config) {const a = document.createElement('a') // 创建一个a标签a.href = config.src // a标签的src属性赋 ...
JS实现图片下载的数种方法
一.js-table2excel npm install js-table2excel import table2excel from 'js-table2excel'const column = [ ...
js实现图片虚化_Web前端之高斯模糊图片记
题记前端需求之高斯模糊图片最近工作中有一个需求,客户提交图片,服务器根据图片生成内容,并将内容显示,要求高斯模糊处理用户的图片并作为作品展示的背景,类似于苹果设备上的高斯模糊背景.用户提交的图片分 ...

如何用js实现图片下载

如何用js实现图片下载？？？

如何用js实现图片下载相关推荐

最新文章

热门文章