H5保存图片到相册

savePic:为打开图片链接,需要长按保存等,可直接用微信打开
savePic(Url) {
    var triggerEvent = "touchstart"; //指定下载方式
    var blob = new Blob([''], { type: 'application/octet-stream' }); //二进制大型对象blob
    var url = URL.createObjectURL(blob); //创建一个字符串路径空位
    var a = document.createElement('a'); //创建一个 a 标签
    a.href = Url;  //把路径赋到a标签的href上
    a.download = Url.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0];
    var e = new MouseEvent('click', (true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));
    a.dispatchEvent(e);
    URL.revokeObjectURL(url);
},
downLoad需要跳转到浏览器打开保存
downLoad(src) {
    var filename; //图片名称
    var filetype; //图片类型
    var path = src
    if (path.indexOf("/") > 0) {
        var file = path.substring(path.lastIndexOf("/") + 1, path.length);
        var fileArr = file.toLowerCase().split(".");
        filename = fileArr[0];
        filetype = fileArr[1];
    }
    let image = new Image();
    image.setAttribute("crossOrigin", "anonymous");
    image.crossOrigin = '*';  // 解决跨域
    image.onload = function () {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let img = canvas.toDataURL(`image/${filetype}`); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = filename; // 设置图片名称,-------------你传递的图片名称
        a.href = img  // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
    };
    image.src = path + '?v=' + Math.random();// 防止缓存
},
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值