前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jszip demo

jszip demo

作者头像
李维亮
发布2022-04-07 16:03:34
1.7K0
发布2022-04-07 16:03:34
举报
文章被收录于专栏:李维亮的博客李维亮的博客

安装包 jszip和file-saver

代码

代码语言:javascript
复制
<template>
  <div class="jszip">
    <span @click="demoZip">downloadZip</span>
  </div>
</template>

<script>
  import JSZip from 'jszip'
  import { saveAs } from 'file-saver'
    export default {
        name: "jszip",
        data(){
          return {

          }
        },
      methods:{
          demoZip(){
            var zip = new JSZip();

            zip.file("Hello.txt", "Hello 1111111111 World\n");
            // zip.file("smile.jpg", imageData, {base64: false});
            zip.generateAsync({type:"blob"}).then(function(content) {
              console.log(content)
              let file = new FileReader();
              file.onload = (e) => {
                console.log(e.target.result);
              }
              file.readAsDataURL(content);
              // see FileSaver.js
              saveAs(content, "example.zip");
            });

            // var img = zip.folder("images");
            // img.file("smile.jpg", 'https://eclaim-test.tpi.cntaiping.com:8043/h5/resource/pic/2020-07/1282879004088262656/952525c11de2138345a9b1e41681115d.jpg', {base64: false});



            // 创建Canvas对象(画布)
            // let canvas =  document.createElement('canvas')
            // 获取对应的CanvasRenderingContext2D对象(画笔)
            // let ctx = canvas.getContext('2d')
            // 创建新的图片对象
            // let img = new Image();
            // var base64 = '' ;//base64
            // img.src = 'http://p1.pstatp.com/large/435d000085555bd8de10';
            // img.setAttribute("crossOrigin",'Anonymous')
            // img.onload = function(){//图片加载完,再draw 和 toDataURL
            //   ctx.drawImage(img,0,0);
            //   base64 = canvas.toDataURL("image/jpeg");
            //   console.log(base64)
            // };


            // img.src = 'http://p1.pstatp.com/large/435d000085555bd8de10';
            // img.setAttribute('crossOrigin', 'Anonymous')
            // img.onload = () => {
            //   canvas.width = img.width;
            //   canvas.height = img.height;
            //   console.log(img)
            //   // 清除画布
            //   ctx.clearRect(0, 0, img.width, img.height);
            //   // 图片压缩
            //   ctx.drawImage(img, 0, 0, img.width, img.height);
            //   let imageData = canvas.toDataURL("image/jpeg");
            //   console.log(imageData)
            //
            // };

          }
      }
    }
</script>

<style scoped>

</style>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-04-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
图片处理
图片处理(Image Processing,IP)是由腾讯云数据万象提供的丰富的图片处理服务,广泛应用于腾讯内部各产品。支持对腾讯云对象存储 COS 或第三方源的图片进行处理,提供基础处理能力(图片裁剪、转格式、缩放、打水印等)、图片瘦身能力(Guetzli 压缩、AVIF 转码压缩)、盲水印版权保护能力,同时支持先进的图像 AI 功能(图像增强、图像标签、图像评分、图像修复、商品抠图等),满足多种业务场景下的图片处理需求。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档