JS Code block 代码块–图片
星期一, 2023-04-17 | Author: Lee | computer, 前端 | 236 views
图片
图片下载
图片转成base64
canvas标签转换成img标签
Base64转Blob对象
创建一个canvas,并获取 CanvasRenderingContext2D
内容以文件形式下载下来
浏览器是否支持webP格式图片
/** * 图片下载,将canvas,或者base64,下载下来 * @param canvas 可以是canvas 元素,或者是base64字符串 * @param name 文件名 * @param format 图片格式 */ function download (canvas, name, format) { // 这里是获取到的图片base64编码,这里只是个例子哈,要自行编码图片替换这里才能测试看到效果 let imgUrl = canvas; if(canvas.toDataURL) { imgUrl = canvas.toDataURL(); } // 如果浏览器支持msSaveOrOpenBlob方法(也就是使用IE浏览器的时候),那么调用该方法去下载图片 if (window.navigator.msSaveOrOpenBlob) { let bstr = atob(imgUrl.split(',')[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } let blob = new Blob([u8arr]); window.navigator.msSaveOrOpenBlob(blob, name + '.' + format) } else { // 这里就按照chrome等新版浏览器来处理 const a = document.createElement('a'); a.href = imgUrl; a.setAttribute('download', name + '.' + format); a.click(); } } /** * 蒋图片转成base64 * width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小 * 可以会有跨域问题,建议是同源 * @param imgSrc 图片地址 * @param width * @param height * @returns {string} */ function getBase64Image(imgSrc, width, height) { return new Promise((resolve) => { const newImg = new Image(); newImg.setAttribute('crossOrigin', 'anonymous'); newImg.src = imgSrc; const canvas = document.createElement('canvas'); canvas.width = width || img.width; canvas.height = height || img.height; const ctx = canvas.getContext('2d'); newImg.onload = function () { ctx.drawImage(newImg, 0, 0, canvas.width, canvas.height); const dataURL = canvas.toDataURL('image/png', 1); resolve(dataURL); }; }); } /** * canvas标签转换成img标签 * @param canvas 标签,不是jquery对象 * @returns {HTMLElement} */ function canvasToImage(canvas) { const img = document.createElement('img'); img.style.backgroundColor = canvas.style.backgroundColor; img.width = canvas.width; img.height = canvas.height; const dataURL = canvas.toDataURL('image/png', 1); img.src = dataURL; return img; } /** * Base64转Blob对象 * @param base64Data * @return {Blob} */ function dataURItoBlob(base64Data = '') { try { let byteString; let mimeString = ''; if (base64Data.split(',')[0].indexOf('base64') >= 0) { byteString = window.atob(base64Data.split(',')[1]); } else { byteString = unescape(base64Data.split(',')[1]); } mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; const ia = new Uint8Array(byteString.length); for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new window.Blob([ia], {type: mimeString}); } catch (error) { console.log(error); } } /** * 创建一个canvas,并获取 CanvasRenderingContext2D * @returns {{canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D}} */ export function create2dContext (width, height) { let canvas = document.createElement('canvas') canvas.width = width canvas.height = height let ctx = canvas.getContext('2d') return { canvas, ctx } } /** * 将内容以文件形式下载下来 */ function downloadFile(json, fileName, format) { // 这里就按照chrome等新版浏览器来处理 const a = document.createElement('a'); let blob = new Blob([json]); a.href = URL.createObjectURL(blob); a.setAttribute('download', fileName + '.' + format); a.click(); } /** * * @desc 判断浏览器是否支持webP格式图片 * @return {Boolean} */ function isSupportWebP() { return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0; } « 前一个:regex 正则表达式下一个:日期 » 更多工具推荐 在线时间戳转换工具 JSON在线编辑工具 在线Navicat加解密mysql连接的密码工具 |
文章作者: Lee
本文地址: https://www.pomelolee.com/2367.html
除非注明,Pomelo Lee文章均为原创,转载请以链接形式标明本文地址
No comments yet.
Leave a comment
Search
相关文章
热门文章
最新文章
文章分类
- ajax (10)
- algorithm-learn (3)
- Android (6)
- as (3)
- computer (85)
- Database (30)
- disucz (4)
- enterprise (1)
- erlang (2)
- flash (5)
- golang (3)
- html5 (18)
- ios (4)
- JAVA-and-J2EE (186)
- linux (143)
- mac (10)
- movie-music (11)
- pagemaker (36)
- php (50)
- spring-boot (2)
- Synology群晖 (2)
- Uncategorized (6)
- unity (1)
- webgame (15)
- wordpress (33)
- work-other (2)
- 低代码 (1)
- 体味生活 (40)
- 前端 (21)
- 大数据 (8)
- 游戏开发 (9)
- 爱上海 (19)
- 读书 (4)
- 软件 (3)