vue 下载图片保存到本地

最新推荐文章于 2024-08-06 16:24:55 发布

杜小帅666

最新推荐文章于 2024-08-06 16:24:55 发布

阅读量965

点赞数

分类专栏： vue 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/m0_47408822/article/details/121553789

版权

本文介绍在Vue项目中如何利用html2canvas库实现从网页下载同源和跨源图片到本地的步骤，包括安装、引入和基本用法。

摘要由CSDN通过智能技术生成

1.首先安装 html2canvas 命令 npm install html2canvas
2.使用的页面引入 import html2canvas from 'html2canvas';
3. 同源图片下载

 ` // 同源(访问的网站域名与服务器域名一致)
    // downs() {
    // 	this.imgUrl = 'https://img2.baidu.com/it/u=2937803703,3095540904&fm=26&fmt=auto&gp=0.jpg';
    // 	var alink = document.createElement("a");
    // 	alink.href = this.imgUrl;
    // 	alink.download = "这是一张图片"; //图片名
    // 	alink.click();
    // }`

    4.不同源图片下载

// 图片不同源下载

downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
 image.setAttribute('crossOrigin', 'anonymous');
      image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = image.