js 利用canvas转换图片格式并下载图片

1.利用canvas转换格式

思路很简单，就是在canvas上drawImage，然后再把canvas转换成想要的图片格式

 convertImageToCanvas = (image) => { //image一定是一个图片对象，不然获取不到宽高var canvas = document.createElement("canvas"); // 新建canvas对象canvas.width = image.width;canvas.height = image.height;canvas.getContext("2d").drawImage(image, 0, 0);return canvas;
}convertCanvasToImage = (canvas) => {let url = canvas.toDataURL("image/jpeg");//拿到一个dataUrl，可new Image()，然后图片的对象的src设置为url，就可以得到图片dom元素return url;
}

2.下载图片

// html代码
<input id="input" type="file" accept="image/*" />
// js代码window.onload = function () {const input = document.getElementById('input')input.addEventListener('change', function (event) {let url = window.URL.createObjectURL(event.target.files[0]);let img = new Image()img.src = urlimg.onload = () => {// convertImageToCanvas函数一定要在、img onload之后使用，否则得不到高宽let canvas = convertImageToCanvas(img)let href = convertCanvasToImage(canvas)let a = document.createElement('a');     // 创建一个a节点插入的documenta.download = '图片名字'  // 设置a节点的download属性值a.href = href ;         // 将图片的src赋值给a节点的hrefa.click()}})
}

js 利用canvas转换图片格式并下载图片相关推荐

vue.js 利用canvas绘制仪表盘圆环进度条-带动画
vue.js 利用canvas绘制简易仪表盘进度条 html代码因为动画效果比较消耗性能,所以进度条单独canvas绘制 <template><div class="ci ...
img绝对路径图片显示_使用python爬虫去风景图片网站批量下载图片
使用python爬虫(requests,BeautifulSoup)去风景图片网站批量下载图片 1.写代码背景: 今天闲来无事,想弄点图片放到电脑,方便以后使用,故去百度查找一些风景图片网站,发现图片 ...
python + selenium +pyquery 爬虫爬取 1688详情图片阿里巴巴详情图片与标题下载图片并进行压缩
python + selenium +pyquery 爬虫爬取 1688详情图片阿里巴巴详情图片与标题下载图片并进行压缩用到的库和源码下载地址需要用到chromedriver 包含wi ...
Vue.js结合Canvas制作二维码和图片的合成（qrcanvas + html2canvas）
(这个有问题,最近会把整理后的更新上去!!!!!!) 最新最新!!!:https://blog.csdn.net/zuorishu/article/details/88632978 需求背景: 分享图 ...
matlab 转换图片格式,Matlab实现图片格式转换 pgm转jpg等
在Matlab下,转换图片格式相对比较容易,本文以 PGM 转 JPG 为例,贴出示例程序: % 将pgm图片批量转换为jpg图片 function [ ] = pgm2jpg( ) % 读取指定目录 ...
利用jsoup 如何从网页中下载图片
来自:http://www.open-open.com/bbs/view/1320576549952 如何从网页中下载图片如果做为爬虫很有必要从网页中下载图片到本地,那么我们利用jsoup来进行该操 ...
java 对图片格式处理,Java 图片处理格式转换
Java 图片处理(包括 Jmagick 的应用) 图片处理( 的应用) 作者: 佚名, 出处:IT 专家网, 2010-10-29 08:30 责任编辑: 谢妍妍, 近期有使用到图片的压缩处理,由于 ...
node.js爬虫之下载图片，批量下载图片，控制下载图片并行上限
首先介绍一下爬虫所需要的的包 require("request"); –get post请求页面 require("cheerio") –解析文本对象为DOM对 ...
批量下载图片-免费批量下载图片软件
总有一些图片你想保存小周浏览了某个网页发现上面的有很多很漂亮的图片,于是想保存下来,开始一波疯狂操作:右键-->图片另存为....保存了50张图片后,手酸得不行了.使用这款图片批量下载软件不到 ...

js 利用canvas转换图片格式并下载图片

1.利用canvas转换格式

2.下载图片

js 利用canvas转换图片格式并下载图片相关推荐

最新文章

热门文章