vue 生成海报，解决跨域问题，下载图片到本地

原创已于 2025-11-07 17:25:36 修改 · 4.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue下载图片

于 2019-09-09 12:18:21 首次发布

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript创建图片元素并将其转换为Base64编码的方法，包括图片的跨域设置、画布创建、图片绘制及最终的Base64数据生成。

// 获取图片元素

<template>
  <el-button type="text" icon="el-icon-download" @click="downImg">下载海报</el-button>
</template>

<script>
  export default {
    data(){
      return {}
    },
    methods: {
      downImg(){
        // 创建图片元素
        var img = new Image();
        //设置图片跨域
        img.setAttribute("crossOrigin", "anonymous");
        //设置图片路径
        img.src = 'https://gips1.baidu.com/it/u=4145892829,4274953263&fm=3074&app=3074&f=PNG?w=2560&h=1440';
        //下载图片
        img.onload = function() {
            //创建画布
        	var can =  document.createElement("canvas");
            //设置画布大小
        	can.width=150;
        	can.height = 150;
        	let ctx = can.getContext("2d");
            //绘制图片
        	ctx.drawImage(img,0,0,150,150);
            //得到图片的base64编码数据
        	var newurl = can.toDataURL("image/png");
            // 生成一个a元素
        	var a = document.createElement("a");
            // 创建一个单击事件
        	var event = new MouseEvent("click");
            // 设置图片名称
        	a.download = "下载图片";
            // 将生成的URL设置为a.href属性
        	a.href = newurl;
            // 触发a的单击事件
        	a.dispatchEvent(event);
        }
      }
    }
  }
</script>

<style>
</style>