a标签图片下载预览压缩 new Blob

最新推荐文章于 2024-05-20 12:33:00 发布

web修理工

最新推荐文章于 2024-05-20 12:33:00 发布

阅读量471

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42374676/article/details/106534722

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script>
      //canvas 的方法
      function downloadCanvasIamge(selector, name) {
        // 通过选择器获取canvas元素
        var canvas = document.querySelector(selector);
        // 使用toDataURL方法将图像转换被base64编码的URL字符串
        var url = canvas.toDataURL("image/png");
        // 生成一个a元素
        var a = document.createElement("a");
        // 创建一个单击事件
        var event = new MouseEvent("click");

        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = name || "下载图片名称";
        // 将生成的URL设置为a.href属性
        a.href = url;

        // 触发a的单击事件
        a.dispatchEvent(event);
      }

      // 调用方式
      // 参数一： 选择器，代表canvas
      // 参数二： 图片名称，可选
      downloadCanvasIamge("canvas", "图片名称");

      //image 的方法
      function downloadIamge(selector, name) {
        // 通过选择器获取img元素
        var img = document.querySelector(selector);
        // 将图片的src属性作为URL地址
        var url = img.src;
        var a = document.createElement("a");
        var event = new MouseEvent("click");

        a.download = name || "下载图片名称";
        a.href = url;

        a.dispatchEvent(event);
      }

      // 调用方式
      // 参数一： 选择器，代表img标签
      // 参数二： 图片名称，可选
      downloadIamge("canvas", "图片名称");

      //跨越
      function downloadIamge(selector, name) {
        var image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function() {
          var canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;

          var context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          drawImage(image, dx, dy) 在画布指定位置绘制原图
          drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
          drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部
          var url = canvas.toDataURL("image/png");

          // 生成一个a元素
          var a = document.createElement("a");
          // 创建一个单击事件
          var event = new MouseEvent("click");

          // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
          a.download = name || "下载图片名称";
          // 将生成的URL设置为a.href属性
          a.href = url;

          // 触发a的单击事件
          a.dispatchEvent(event);
        };

        image.src = document.querySelector(selector).src;
      }

      // 调用方式
      // 参数一： 选择器，代表img标签
      // 参数二： 图片名称，可选
      downloadIamge("canvas", "图片名称");
    </script>
  </body>
</html>

下载文件

      function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
 
  element.style.display = 'none';
  document.body.appendChild(element);
 
  element.click();
 
  document.body.removeChild(element);
}
 
 download("hello.txt","This is the content of my file :)");

function downloadFile(fileName, content){
    var aLink = document.createElement('a');
    var blob = new Blob([content]);
    var evt = document.createEvent("HTMLEvents");
    // initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
    evt.initEvent("click", false, false);
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}

   const img_original = document.getElementById('img_original');
    const img_output = document.getElementById('img_output');
    let blob;

    function preview(file) {
        let reader = new FileReader();
        reader.onload = function () {
            img_original.src = this.result;
            img_original.onload = () => {
                console.log('图片原始宽高:', img_original.naturalWidth, img_original.naturalHeight);
                console.log('图片原始大小:', file.size)
            }
        };
        reader.readAsDataURL(file);
    }



function compress() {
        // 压缩到图片原始宽高的一半
        let w = img_original.naturalWidth / 2;
        let h = img_original.naturalHeight / 2;

        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        let anw = document.createAttribute("width");
        anw.nodeValue = w;
        let anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);

        ctx.fillRect(0, 0, w, h);
        ctx.drawImage(img_original, 0, 0, w, h);

        const base64 = canvas.toDataURL('image/jpeg', 0.75);// 压缩后质量
        const bytes = window.atob(base64.split(',')[1]);
        const ab = new ArrayBuffer(bytes.length);
        const ia = new Uint8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        blob = new Blob([ab], {type: 'image/jpeg'});

        console.log('压缩后的图片大小', blob.size);
        // 预览压缩后的图片
        img_output.src = base64
    }

 function save() {
        if (blob) {
            let a = document.createElement('a');
            let event = new MouseEvent('click');
            a.download = Math.round(new Date() / 1000) + '.jpg';
            a.href = URL.createObjectURL(blob);
            a.dispatchEvent(event)
        }
    }

转载:https://www.jianshu.com/p/9d1b4879991e

web修理工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
a标签图片下载预览压缩 new Blob

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Page Title</title> <meta name="viewport" content="width=device-width, initi
复制链接

扫一扫