vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)_刘宏缔的架构森林-编程思维

一,js代码:

<template>
<div>
  <img id="img" src="/static/image/dog.jpg" style="width:300px;" /><br/>
  <button @click="downImgByUrl">down by url</button>
  <button style="margin-left:10px;" @click="downImgByCanvas">down by canvas</button>
</div>
</template>

<script>
export default {
  name: "ImgDown",
  setup () {
      //得到图片的canvas,然后下载
      const downImgByCanvas = () => {
          let id="img";
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        //得到原始的宽高
        let sourceImage = document.getElementById(id);
        canvas.width = sourceImage.naturalWidth;
        canvas.height = sourceImage.naturalHeight;
        //保存图片到canvas
        ctx.drawImage(sourceImage, 0, 0);
        downJpgByCanvas(canvas);
      }
      
      //得到图片的url,然后下载
      const downImgByUrl = () => {
         let img = document.getElementById('img');
          downJpgByUrl(img.src);
      }

    //下载图片:通过canvas
    const downJpgByCanvas = (canvas) => {
      var oA = document.createElement("a");
      let time = timeFormat();
      oA.download = "img_"+time+'.jpg';// 设置下载的文件名,默认是'下载'
      oA.href = canvas.toDataURL("image/jpeg");
      document.body.appendChild(oA);
      oA.click();
      oA.remove(); // 下载之后把创建的元素删除
    }

    //下载图片:通过url
    const downJpgByUrl = (url) => {
      let time = timeFormat();
      var a = document.createElement('a');      // 创建一个a节点插入的document
      var event = new MouseEvent('click')          // 模拟鼠标click点击事件
      a.download = "img_"+time+'.jpg';                  // 设置a节点的download属性值
      a.href = url;                                     // 将图片的src赋值给a节点的href
      a.dispatchEvent(event)
      a.remove(); // 下载之后把创建的元素删除
    }

    //补0
    const add0 = (m) => {
      return m<10?'0'+m:m
    }
    //格式化时间
    const timeFormat = ()=>{
      var time = new Date();
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      let res = y+add0(m)+add0(d)+add0(h)+add0(mm)+add0(s);
      return res;
    }

      return {
        downImgByUrl,
        downImgByCanvas,
      }
  }
}
</script>

<style scoped>

</style>

说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取: https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明:作者:刘宏缔 邮箱: 371125307@qq.com

二,测试效果:

界面:

原图:

下载后大小:

 

 最上面的文件,大小是359KB,是通过canvas下载的,
 是因为canvas下载时重新生成了图片,所以文件体积发生了变化

三,查看vue框架的版本:

liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm list vue
image2pdf@0.1.0 /data/vue/pdf/image2pdf
├─┬ @vue/cli-plugin-babel@5.0.8
│ └─┬ @vue/babel-preset-app@5.0.8
│   ├─┬ @vue/babel-preset-jsx@1.3.0
│   │ └── vue@3.2.37 deduped invalid: "2.x" from node_modules/@vue/babel-preset-jsx
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped

 

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/architectforest/p/16711912.html

实现响应式网页设计_前端--末晨曦吖-编程思维

@目录为什么需要响应式网页什么是响应式网页如何实现响应式网页1. 设置前置 meta 元素2. 设置了固定宽度的区域3. 使用布局的区域4. 图片5. 字体 为什么需要响应式网页 点击打开视频讲解更加详细 随着网页数量和质量的上升,以及设备种类和数量的增加,不同设备查看不同网页导致的缩放问题、排版问题等一系列前端问题越

基于electron+vue+element构建项目模板之【自定义标题栏&右键菜单项篇】_李拜天呀-编程思维

1、概述 开发平台OS:windows 开发平台IDE:vs code 本篇章将介绍自定义标题栏和右键菜单项,基于electron现有版本安全性的建议,此次的改造中主进程和渲染进程彼此语境隔离,通过预加载(preload.js)和进程间通信(ipc)的方式来完成。 2、窗口最大化  一些应用在实际情况中,希望启动的时候

【vue3源码】十一、初始vue3中的渲染器 - 编程思维

【vue3源码】十一、初始vue3中的渲染器在介绍渲染器之前。我们先简单了解下渲染器的作用是什么。渲染器最主要的任务就是将虚拟DOM渲染成真实的DOM对象到对应的平台上,这里的平台可以是浏览器DOM平台,也可以是其他诸如canvas的一些平台。总之vue3的渲染器提供了跨平台的能力。渲染器的生成当使用createApp

vue3 reactive 源码分析 - 编程思维

概要本文通过抽取Vue3 reactive源码中的主要部分,来理解其响应式object的实现方式。本文源码基于这个入口文件:github reactive.tsreactive()源码位置:github reactive.tsexport function reactive(target) { return cre