Pomelo Lee workspace

/**
 * 图片下载，将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连接的密码工具