文档章节

工作记录-图片高亮和 IE 下载图片错误

IrisHuang
 IrisHuang
发布于 02/21 16:29
字数 681
阅读 71
收藏 0

去年年底换了新的新项目组,又开始用自己喜欢的 angular 框架开发了,开心[眯眼笑]。这段时间做了几个需求,这里记录一下需要注意的几个点。

图片高亮功能

在原来的DOM层上添加遮罩,添加新的div;核心代码为:

toImgPosition(){
    const { position } = item;// 获取需要标注内容的位置
    const { width, height } = this.originData.file;// 获取需要标亮的图片的初始大小
    // 获取页面中图片的dom 的大小
    const currentRect = document.querySelector(`#imgPage`).querySelector('img').getBoundingClientRect();
    const scaleX = width / originDimension.width;// originDimension 为设定的画布的大小
    const scaleY = height / originDimension.height;

    // 添加遮罩元素大小和位置
    const div = document.createElement('div');
    div.id = 'highlightRect';
    div.style.position = 'absolute';
    div.style.width = [position[2]*scaleX - postion[0]*scaleX] + 'px';
    div.style.height = [postion[3\]*scaleY - postion[1]*scaleY] + 'px';
    div.style.left = postion[0]*scaleX + 'px';
    div.style.top = postion[1]*scaleY + 'px';
    div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
    document.querySelector(`#imgPage`).appendChild(div);
    div.scrollIntoView();
}

getBoundingClientRect() 用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置; 它的思路为:

  1. 计算图片和画布的比例大小;
  2. 根据比例添加遮罩元素
  3. element()scrollIntoView() 将元素跳转到可视区域

ie 不支持 a 标签的 download 属性, 导致下载在ie浏览器的时候报错

解决方式如下:

downloadFile(url: string, fileName: string): void {
    const ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase();
    if (url && url.trim()) {
        if (window.navigator.msSaveOrOpenBlob && this.isImg(ext)) {
            // 兼容 ie 浏览器下载图片
            this.convertUrlToBase64(url).then(base64 => {
                const blob = this.convertBase64UrlToBlob(base64);
                window.navigator.msSaveBlob(blob, fileName);
           });
        } else {
            let a = document.createElement('a');
            a.href = url;
            a.download = fileName || '未命名文件';
            a.click();    
            a = null;
        }
    } else {
        this.msg.remove();
        this.msg.error('文件下载路径不能为空!');
    }
}

// 将二进制格式转换为blob格式
convertBase64UrlToBlob(base64) {
    const parts = base64.dataURL.split(';base64,');
    const contentType = parts\[0\].split(':')\[1\];
    const raw = window.atob(parts\[1\]);    
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; i++) {
        uInt8Array\[i\] = raw.charCodeAt(i);
    }
    return new Blob(\[uInt8Array\], { type: contentType });
}

// 将图片格式转换为二进制格式
convertUrlToBase64(url) {
    return new Promise(function(resolve, reject) {
        const img = new Image();
        img.crossOrigin = 'Anonymous';
        img.src = url;
        img.onload = function() {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
            const dataURL = canvas.toDataURL('image/' + ext);
            const base64 = {    
                dataURL: dataURL,
                type: 'image/' + ext,
                ext: ext
            };
        resolve(base64);
        };
    });
}

// 判断是否是图片
isImg(ext) {
    if (ext === 'png' || ext === 'jpg' || ext === 'jpeg' ||  ext === 'gif' ||  ext === 'bmp') {
     return true;
 }
}

当页面之间跳转,且是跳转瞬间向后台发送请求,将返回数据需要传入下个路由界面时,这个时候可以用浏览器缓存:localStorage(),记得清缓存

localStorage.removeItem(‘key’);

© 著作权归作者所有

下一篇: mobx 初试小结
IrisHuang
粉丝 4
博文 75
码字总数 46818
作品 0
浦东
前端工程师
私信 提问
加载中

评论(0)

tamlok/vnote

VNote 英文 English VNote 是一个受Vim启发开发的专门为 Markdown 而优化、设计的笔记软件。VNote是一个更了解程序员和Markdown的笔记软件。 下载 国内的用户可以尝试在百度云盘下载VNote的最...

tamlok
2018/01/08
0
0
基于 Qt 框架的开源笔记软件--VNote

VNote是一个受Vim启发开发的专门为Markdown而优化、设计的笔记软件。VNote是一个更了解程序员和Markdown的笔记软件。 VNote是一个基于Qt框架的、免费的开源笔记软件。VNote专注于Markdown的编...

tamlok
2018/01/06
1.7W
17
UEditor 1.1.8 发布,百度开源富文本编辑器

UEditor是由百度 Web前端研发部开发的所见即所得的富文本在线编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许互联网开发者自由传播和使用代 码。百度UEditor的推出,可...

红薯
2012/01/10
3K
10
#翻译# Android Performance Case Study by Romain...

片头声明: 1、本片是据Romain Guy剧本编写Android Performance Case Study衍生的电影,某些部分可能由于个人英语水平有限及理解原因,可能有别于原作者的原意。如有发现,请指正。以利于我们...

Drealin
2013/05/10
2.7K
10
WinForms Adorner UI Manager v16.1支持高亮特定控件

当表单验证错误的时候需要在旁边提示错误原因,WinForms Adorner新增了一个Validation Hint,可以高亮目标控件并以图片的形式显示不同的提示(有效的,无效的和不确定的)。 Validation Hin...

百mumu
2016/06/14
37
0

没有更多内容

加载失败,请刷新页面

加载更多

java关键字 —— new、this、static

  java关键字,也叫保留字(50个),是java有特殊意义的标识符,不能用作参数名、变量名、方法名、类名、包名等。   现在我们讲讲其中三个关键字的使用吧~~~ 一、new关键字 1. 用途:新建...

osc_s2b5kacl
5分钟前
5
0
java 集合框架的工具类Collections

sort(),max(),binarySearch(),fill() public class CollectionsDemo { public static void main(String[] args) { replaceAllDemo(); } public static void replaceAll......

osc_r9yyhhqz
5分钟前
3
0
创龙基于Xilinx Kintex-7系列高性价比FPGA开发板散热风扇接口、SATA接口

处理器 Xilinx Kintex-7系列FPGA处理器,芯片型号为XC7K325T-2FFG676I,兼容XC7K160T/410T-2FFG676I,高达326K逻辑单元,840个DSP Slice,硬件如下图: 散热风扇接口 开发板引出1个散热风扇接...

Tronlong创龙
6分钟前
15
0
【经验分享】学习Java的好书有哪些?Java书籍清单

Java书籍是程序员学习提升技能的重要学习渠道,通过书籍Java程序员可以学习当前流行、重要的相关技能。经典的书经受时间的考验,随着岁月的流逝变得越来越重要,让我们不断的学习和进步。 为...

osc_b1kaj6np
7分钟前
12
0
java Collections的reverseOrder(),SynList()

Collections的reverseOrder(比较器)返回相反的比较器,可以逆转比较器。 SynList()可以让非同步变成同步,底层实现synchronized(){}。 swap交换元素位置。 Collections.shuffle()随机重新排序...

osc_2gkfj43j
8分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部