博主信息
博文 143
粉丝 1
评论 0
访问量 425501
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
通过canvas作图片缓存
弘德誉曦的博客
原创
1031人浏览过

通过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>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. title: 'Hello',
  17. imgSrc: '/static/logo.png'
  18. }
  19. },
  20. onLoad() {
  21. var that = this;
  22. that.loadPic();
  23. },
  24. methods: {
  25. loadPic(){
  26. var that = this;
  27. var url = "https://n.sinaimg.cn/spider20210721/200/w640h360/20210721/e9be-15a5a455644ce32c9bbfc8103a65ae39.jpg";
  28. uni.getImageInfo({
  29. src: url,
  30. success(res) {
  31. let img = new Image();
  32. img.setAttribute("crossOrigin",'Anonymous')
  33. img.src = res.path;
  34. console.log(img)
  35. let canvas = document.createElement('canvas');
  36. var ctx = canvas.getContext("2d");
  37. img.onload = function(e){
  38. var path = img;
  39. ctx.drawImage(path, 0, 0)
  40. var baseStr = canvas.toDataURL("image/jpeg", 1);
  41. that.imgSrc = baseStr;
  42. }
  43. }
  44. });
  45. }
  46. }
  47. }
  48. </script>
  49. <style>
  50. .content {
  51. display: flex;
  52. flex-direction: column;
  53. align-items: center;
  54. justify-content: center;
  55. }
  56. .logo {
  57. height: 200rpx;
  58. width: 200rpx;
  59. margin-top: 200rpx;
  60. margin-left: auto;
  61. margin-right: auto;
  62. margin-bottom: 50rpx;
  63. }
  64. .text-area {
  65. display: flex;
  66. justify-content: center;
  67. }
  68. .title {
  69. font-size: 36rpx;
  70. color: #8f8f94;
  71. }
  72. </style>
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学