通过canvas作图片缓存

测试环境在uniapp中

  1. <template>
  2.     <view class="content">
  3.         <image class="logo" src="/static/logo.png"></image>
  4.         <view class="text-area">
  5.             <text class="title">{{title}}</text>
  6.             <view class="">
  7.                 <image :src="imgSrc" mode=""></image>
  8.             </view>
  9.         </view>
  10.     </view>
  11. </template>
  13. <script>
  14.     export default {
  15.         data() {
  16.             return {
  17.                 title: 'Hello',
  18.                 imgSrc: '/static/logo.png'
  19.             }
  20.         },
  21.         onLoad() {
  22.             var that = this;
  23.             that.loadPic();
  24.         },
  25.         methods: {
  26.             loadPic(){
  27.                 var that = this;
  28.                 var url = "https://n.sinaimg.cn/spider20210721/200/w640h360/20210721/e9be-15a5a455644ce32c9bbfc8103a65ae39.jpg";
  29.                 uni.getImageInfo({  
  30.                     src: url,  
  31.                     success(res) {  
  32.                         let img = new Image(); 
  33.                         img.setAttribute("crossOrigin",'Anonymous')
  34.                         img.src = res.path;  
  35.                         console.log(img)  
  37.                         let canvas = document.createElement('canvas');  
  38.                         var ctx = canvas.getContext("2d");
  39.                         img.onload = function(e){
  40.                             var path = img;
  41.                             ctx.drawImage(path, 0, 0)
  42.                             var baseStr = canvas.toDataURL("image/jpeg", 1);
  43.                             that.imgSrc = baseStr;
  44.                         }
  45.                     }  
  46.                 });  
  47.             }
  48.         }
  49.     }
  50. </script>
  52. <style>
  53.     .content {
  54.         display: flex;
  55.         flex-direction: column;
  56.         align-items: center;
  57.         justify-content: center;
  58.     }
  60.     .logo {
  61.         height: 200rpx;
  62.         width: 200rpx;
  63.         margin-top: 200rpx;
  64.         margin-left: auto;
  65.         margin-right: auto;
  66.         margin-bottom: 50rpx;
  67.     }
  69.     .text-area {
  70.         display: flex;
  71.         justify-content: center;
  72.     }
  74.     .title {
  75.         font-size: 36rpx;
  76.         color: #8f8f94;
  77.     }
  78. </style>

更多相关文章

  1. 懒加载及轮播图
  2. 轮播图和懒加载
  3. 轮播图实现
  4. html 背景图片全局填充
  5. 21.）PHPWeb开发框架~laravel中缓存系统Cache的使用及配置操作
  6. 19.【TP6学习笔记】Cache缓存的设置和清除等使用操作
  7. PHP:文件上传上传限制,文件大小不超过5M,文件后缀设置，检查图片合
  8. 详解支撑7亿用户搜索的百度图片处理收录中台
  9. 又说骚话，Linus再次拒绝Intel CPU漏洞补丁

随机推荐

  1. java获取MySQL自动的int类型的Id
  2. java实现定时备份mysql数据库-----已通过
  3. mysql 自增列id 最大为多少 一直insert会
  4. MySQL的事务隔离级别以及设置
  5. MySQL---数据库从入门走向大神系列(三)-
  6. 阿里云服务器远程连接mysql
  7. 迁移外键与Laravel中雄辩的关系
  8. MySQL] 行列转换变化各种方法实现总结（行
  9. 【Java Web】简易商品信息管理系统——首
  10. oracle、mysql、db2三大数据库分页方法的